web-dev-qa-db-fra.com

Copie Javascript dans le presse-papiers en safari?

Il peut s'agir d'une question en double, mais je n'ai pas trouvé la solution.

J'essaie de copier du texte lors du clic sur le bouton. Son fonctionne sur chrome, mozilla (fonctionne sur windows et mac mais pas sur linux). Et ça ne marche pas en safari.

J'utilise la commande document.execCommand("copy") pour la copie.

Safari prend-il en charge cette commande?

Existe-t-il un moyen compatible avec tous les navigateurs?

javascriptjquerygoogle-chromefirefoxsafari
13
Akshay Deshmukh

Veuillez vérifier ma solution.

Il fonctionne sur Safari (testé sur iPhone 7 et iPad) et sur d'autres navigateurs.

window.Clipboard = (function(window, document, navigator) {
    var textArea,
        copy;

    function isOS() {
        return navigator.userAgent.match(/ipad|iphone/i);
    }

    function createTextArea(text) {
        textArea = document.createElement('textArea');
        textArea.value = text;
        document.body.appendChild(textArea);
    }

    function selectText() {
        var range,
            selection;

        if (isOS()) {
            range = document.createRange();
            range.selectNodeContents(textArea);
            selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            textArea.setSelectionRange(0, 999999);
        } else {
            textArea.select();
        }
    }

    function copyToClipboard() {        
        document.execCommand('copy');
        document.body.removeChild(textArea);
    }

    copy = function(text) {
        createTextArea(text);
        selectText();
        copyToClipboard();
    };

    return {
        copy: copy
    };
})(window, document, navigator);

// How to use
Clipboard.copy('text to be copied');

https://Gist.github.com/rproenca/64781c6a1329b48a455b645d361a9aahttps://fiddle.jshell.net/k9ejqmqt/1/

J'espère que cela vous aide.

Cordialement.

14
Rodrigo

Parce que la première réponse ne fonctionne pas pour moi sur iPhone 10 Safari, j'ai essayé de trouver une autre solution et j'en ai trouvé une décrite ici

Fondamentalement, cela dit une solution très similaire mais une syntaxe différente:

pris en charge par "IE 10+, Chrome 43+, Firefox 41+ et Opera 29+")

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
  // Select the email link anchor text  
  var emailLink = document.querySelector('.js-emaillink');
  var range = document.createRange();
  range.selectNode(emailLink);
  window.getSelection().addRange(range);

  try {
    // Now that we've selected the anchor text, execute the copy command  
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy email command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  // Remove the selections - NOTE: Should use
  // removeRange(range) when it is supported  
  window.getSelection().removeAllRanges();
});
body {
  padding: 10px;
}
<p>Email me at <a class="js-emaillink" href="mailto:[email protected]">[email protected]</a></p>

<p><button class="js-emailcopybtn">Copy Email</button></p>

Il mentionne également une bibliothèque appelée clipboardjs ce qui a l'air génial.

Dans mon cas, ce code js simple fonctionne sur:

  • iPhone 10 Safari
  • chrome (Android/pc (67.0.3396.79))
  • opéra (pc (53.0.2907.68))

Malheureusement, cela ne fonctionne pas:

  • pc/Android Firefox (60.0.1 (64 bits))

Dans le cas de Firefox, la simple sélection et copie fait l'affaire.

element.select();
document.execCommand('copy');
1
StMa

J'ai trouvé que pour safari, le texte doit être sélectionné avant que document.execCommand () ne fonctionne.

En outre, addRange () n'est pas pris en charge pour les autres navigateurs ( déconseillé dans Chrome ), ce qui signifie qu'il existe des cas où il ne fusionne pas correctement la sélection et la plage. Ce que cela signifie pour l'expérience utilisateur, c'est que l'utilisateur devra cliquer deux fois dans Safari pour que la valeur soit copiée. L'ajout de .removeAllRanges () avant d'ajouter la plage vous aidera à vous assurer que vous saisissez la bonne sélection pour la copie. Je ne sais pas si vous avez toujours besoin du deuxième .removeAllRanges () mais je l'ai gardé pour être sûr.

 copy(id) {
    var configId = document.querySelector(id);
    var range = document.createRange();
    range.selectNode(configId);
    var selection = window.getSelection()
    selection.removeAllRanges();
    selection.addRange(range);

    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      console.log('Copy command was ' + msg);
    } catch (err) {
      console.log('Oops, unable to copy');
    }

    selection.removeAllRanges();
  }

Pour utiliser (dans la même classe):

<Button icon="copy" onClick={() => {this.copy(id)}}/>

id pourrait être n'importe quel sélecteur html

Cela a fonctionné pour moi dans Chrome et Safari.

1
Diana Nguyen

J'ai eu le même problème - il s'est avéré que mon problème était dû au fait que je créais un élément temporaire select pour copier le texte, ce qui est bien, mais je le cachais également via diverses méthodes, le coupable étant element.style.width = 0. Supprimer cela et utiliser d'autres méthodes pour le cacher a résolu mon problème.

J'espère que cela aide toute personne rencontrant le même problème.

0
mrseanbaines

Selon CanIUse, Safari sur iOS ne prend pas en charge document.execCommand ("copie"), probablement pour des raisons de sécurité.

0
Mahi