web-dev-qa-db-fra.com

Comment puis-je copier dans le presse-papier en HTML5 sans utiliser Flash?

Je souhaite utiliser une fonction de copie dans le presse-papier en HTML5, mais sans utiliser flash. C'est possible? Comment? 

J'ai essayé d'implémenter une fonction de copie sur clipboad avec JavaScript, mais cela ne fonctionne pas:

function Copytoclipboard() {
    var body = document.body,
        range, sel;
    if (document.createRange && window.getSelection) {
        range = document.createRange();
        sel = window.getSelection();
        sel.removeAllRanges();
        try {
            range.selectNodeContents(el);
            sel.addRange(range);
            document.execCommand('Copy');
        } catch (e) {
            range.selectNode(el);
            sel.addRange(range);
            document.execCommand('Copy');
        }
    } else if (body.createTextRange) {
        range = body.createTextRange();
        range.moveToElementText(el);
        range.select();
        range.execCommand('Copy');
    }
}
javascripthtml5
31
RKS

Vous pouvez utiliser le HTML5 clipboard apihttp://www.htmlgoodies.com/html5/other/working-with-clipboard-apis-in-html5-web-apps.html#fbid=eh9tM7GHJWF

Mais notez que tous les navigateurs ne le supportent pas complètement à partir de maintenant: http://caniuse.com/#feat=clipboard

26
Variant

Cela ne fonctionne pas car il nécessite une interaction de l'utilisateur telle qu'un clic. Sinon, document.execCommand ne fonctionnera pas. Vous pouvez également vouloir vérifier clipboard.js , c’est une bibliothèque très facile à utiliser pour copier du texte dans le presse-papiers sans Flash.

17
Zeno Rocha

UPDATE: Cette solution fonctionne également dans Safari.

Je ne pense pas qu'il existe une solution multi-navigateur non flash pour cela pour le moment. Voici une solution qui fonctionne au moins dans les dernières versions de Chrome, Firefox et Edge:

function copyText(text){
  function selectElementText(element) {
    if (document.selection) {
      var range = document.body.createTextRange();
      range.moveToElementText(element);
      range.select();
    } else if (window.getSelection) {
      var range = document.createRange();
      range.selectNode(element);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    }
  }
  var element = document.createElement('DIV');
  element.textContent = text;
  document.body.appendChild(element);
  selectElementText(element);
  document.execCommand('copy');
  element.remove();
}


var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  copyText(txt.value);
})
<input id="txt" />
<button id="btn">Copy To Clipboard</button>

Remarque: L'utilisation de cette solution pour copier une chaîne vide ou une chaîne contenant uniquement des espaces ne fonctionnera pas.

17
Trevor

Fonction pour insérer du texte dans le presse-papier:

function copyStringToClipboard (string) {
    function handler (event){
        event.clipboardData.setData('text/plain', string);
        event.preventDefault();
        document.removeEventListener('copy', handler, true);
    }

    document.addEventListener('copy', handler, true);
    document.execCommand('copy');
}
8
Petr Žoček

Si vous ne voulez pas que le contenu du champ de texte soit sélectionné avant la copie, voici une solution à deux lignes qui fonctionne au moins dans Chrome 56 et Edge, mais je parie que cela fonctionne également dans d'autres navigateurs.

function clickListener() {
  document.getElementById('password').select();
  document.execCommand('copy');
}

document.getElementById('copy_btn').addEventListener('click', clickListener);
<input id=password value="test">
<button id=copy_btn>Copy</button>

https://jsfiddle.net/uwd0rm08/

3
Artur Beljajev

Vous pouvez utiliser Clipboard.js POUR ajouter une copie au presse-papiers. Ce travail sans flash jetez un oeil sur le code que j'utilise:

//for copy to clickboard
var els = document.querySelectorAll('pre');
for (var i=0; i < els.length; i++) {
//for CLIPBOARD
var atr = els[i].innerHTML;
    els[i].setAttribute("data-clipboard-text", atr);
	//For SELECT
	var ids = "elementID"+[i]
    els[i].setAttribute("id", ids);
    els[i].setAttribute("onclick","selectText(this.id)");
	
}
    var btns = document.querySelectorAll('pre');
    var clipboard = new ClipboardJS(btns);

    clipboard.on('success', function(e) {
        console.log(e);
	 });

    clipboard.on('error', function(e) {
        console.log(e);
    });
	
	//for select
	function selectText(id){
    var sel, range;
    var el = document.getElementById(id); //get element id
    if (window.getSelection && document.createRange) { //Browser compatibility
      sel = window.getSelection();
      if(sel.toString() == ''){ //no text selection
         window.setTimeout(function(){
            range = document.createRange(); //range object
            range.selectNodeContents(el); //sets Range
            sel.removeAllRanges(); //remove all ranges from selection
            sel.addRange(range);//add Range to a Selection.
        },1);
      }
    }else if (document.selection) { //older ie
        sel = document.selection.createRange();
        if(sel.text == ''){ //no text selection
            range = document.body.createTextRange();//Creates TextRange object
            range.moveToElementText(el);//sets Range
            range.select(); //make selection.
        }
    }
}
<pre>I Have To Copy it<pre>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
Pour en savoir plus sur son utilisation, visitez le site source: html5 copie dans le presse-papier

0
Ajay Malik