Pourquoi sur les appareils Android, s'il y a `alert()` avant `navigator.clipboard.writeText`, il ne peut pas réussir à copier le texte dans le presse-papiers ?

Question

Lorsque vous essayez de copier du texte à l'aide de navigator.clipboard.writeText() sur Chrome sur Android, cela fonctionne correctement tant que je n'affiche pas la boîte d'alerte par la suite. Une fois que j'affiche une alert(), cela ne fonctionne plus.

Par exemple, le code suivant fonctionne comme prévu :

function maFonction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);
}</pré>
<pre class="brush:html;toolbar:false;"><input type="text" value="Bonjour tout le monde" id="myInput" style="width:auto">
<bouton onclick="maFonction()">copier</bouton>

Cependant, le code ci-dessous ne fonctionne pas, ne génère aucune erreur dans la console et fonctionne correctement sur Chrome sur PC, mais pas sur Android.

fonction maFonction()
{
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);
  alert("Texte copié avec succès")
}</pré>
<pre class="brush:html;toolbar:false;"><input type="text" value="Bonjour tout le monde" id="myInput" style="width:auto" >
<bouton onclick="maFonction()" >copier</bouton>

Est-ce que quelqu'un sait ce qui s'est passé ? Merci.

Answer 1

Raisons navigator.clipboard.writetext Raisons pour lesquelles ça ne marche pas :

1. Problème de compatibilité : cette méthode a été ajoutée plus tard après que la méthode document.exec("copy") soit devenue obsolète. Dans certaines versions de navigateur, cette méthode ne fonctionnera pas et vous devez vérifier si cette méthode est disponible.

2. Document non ciblé : si vous écrivez du contenu dans le presse-papiers sans aucune interaction de l'utilisateur, le navigateur bloquera votre demande et générera une erreur dans la promesse de cette méthode. Imaginez qu'un utilisateur souhaite copier une chaîne que vous avez chargée depuis Internet (ajax）。如果此 ajax La requête prend un certain temps, le focus du navigateur expirera et, d'après mon expérience, la copie ne peut pas être terminée.

3. Autorisations non autorisées : Parfois, les utilisateurs peuvent empêcher le navigateur de copier automatiquement dans le presse-papiers en modifiant leurs paramètres de confidentialité et de sécurité. Avant de copier, vérifiez les autorisations pour écrire dans le presse-papiers. Cependant, la permission clipboard-write est automatiquement accordée à la page lorsqu'elle se trouve dans l'onglet actif.

4. Problèmes asynchrones : La copie dans le presse-papiers est une opération asynchrone et vous devez attendre que votre code termine son travail.

5. Sites Web HTTP : Cette fonctionnalité n'est disponible que dans un contexte sécurisé (HTTPS), dans certains ou tous les navigateurs pris en charge.

6. Apple Safari Issue : l'API Presse-papiers d'Apple attend un Promise 在写入剪贴板时。因此，我们可以使用 ClipboardItem 将一个 Promise 传递给 write 方法。我建议您使用 write 而不是 writeText

   dans la plupart des cas

Facile à parler, montre-moi Code :

function copy(text) {
    return new Promise((resolve, reject) => {
        if (typeof navigator !== "undefined" && typeof navigator.clipboard !== "undefined" && navigator.permissions !== "undefined") {
            const type = "text/plain";
            const blob = new Blob([text], { type });
            const data = [new ClipboardItem({ [type]: blob })];
            navigator.permissions.query({name: "clipboard-write"}).then((permission) => {
                if (permission.state === "granted" || permission.state === "prompt") {
                    navigator.clipboard.write(data).then(resolve, reject).catch(reject);
                }
                else {
                    reject(new Error("Permission not granted!"));
                }
            });
        }
        else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
            var textarea = document.createElement("textarea");
            textarea.textContent = text;
            textarea.style.position = "fixed";
            textarea.style.width = '2em';
            textarea.style.height = '2em';
            textarea.style.padding = 0;
            textarea.style.border = 'none';
            textarea.style.outline = 'none';
            textarea.style.boxShadow = 'none';
            textarea.style.background = 'transparent';
            document.body.appendChild(textarea);
            textarea.focus();
            textarea.select();
            try {
                document.execCommand("copy");
                document.body.removeChild(textarea);
                resolve();
            }
            catch (e) {
                document.body.removeChild(textarea);
                reject(e);
            }
        }
        else {
            reject(new Error("None of copying methods are supported by this browser!"));
        }
    });
    
}

Utilisation :

try {
    await copy("Hay yah!");
}
catch(e) {
    console.error(e);
}

IMPORTANT : Test via les boutons et les onclick événements, pas dans la console.

Answer 2

Parce que la méthode navigator.clipboard.writeText renvoie une Promesse et que votre code n'attend pas son résultat.

Si vous le corrigez selon le code ci-dessous, tout devrait bien se passer :

function myFunction() {
    var copyText = document.getElementById("myInput");
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    navigator.clipboard
      .writeText(copyText.value)
      .then(() => {
        alert("成功复制");
      })
      .catch(() => {
        alert("出了点问题");
      });
}

Pour plus d'informations sur les méthodes Promesse et Promise和navigator.clipboard.writeText, veuillez visiter le lien suivant :
Promesse sur JavaScript.info
Interagir avec le presse-papiers sur MDN