web-dev-qa-db-fra.com

Copier l'URL actuelle dans le presse-papiers

Je ne sais pas pourquoi cela a été si difficile pour moi aujourd'hui, mais pour une raison quelconque, je n'arrive pas à obtenir qu'il copie l'URL actuelle dans le presse-papiers. Dans l'ensemble, je cherche un moyen de le faire sans besoin de créer des éléments de texte cachés.

Voici ce que j'essaie jusqu'à présent:

var shareBtn = document.querySelector(".share-button");

shareBtn.addEventListener('click', function(event) {
  var cpLink = window.location.href;
  cpLink.select();

  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');
  }
  event.preventDefault;
});

Lorsque j'essaie de m'y prendre en utilisant la fonction .select() j'obtiens cette erreur: t.select is not a function Je ne suis donc pas sûr à 100% de la meilleure façon de procéder. Encore une fois, sans utiliser jQuery (ou toute autre bibliothèque JS) et sans utiliser une sorte de champ de texte caché.

javascripthtmlclipboardclipboarddata
8
ultraloveninja

Vous pouvez créer un élément DOM temporaire pour contenir l'URL

Malheureusement, il n'y a pas d'API standard pour les opérations du presse-papiers, nous nous retrouvons donc avec la manière hacky d'utiliser un élément HTML input pour répondre à nos besoins. L'idée est de créer une entrée, de définir sa valeur sur l'URL du document courant, de sélectionner son contenu et d'exécuter copy.

Nous nettoyons ensuite le désordre au lieu de définir l'entrée sur caché et polluant le DOM.

var dummy = document.createElement('input'),
    text = window.location.href;

document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand('copy');
document.body.removeChild(dummy);
25
ppajer