Próbuję dowiedzieć się, jak skopiować ciąg i wkleić z JavaScript.

Ten przykład kodu:

function copyLink() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("copy");
} 

Kopie z myInput value:

  <input type="text" value="ttps://site.org/" id="myInput">

Ale próbuję skopiować tekst ze zmiennej, nieuwzględniony w html value:

 <button onclick="copyText()">Copy text</button>

Który znajduje się w .js, aby umożliwić użytkownikowi kopiowanie / wklejanie:

function copyText() {
   var text = "long text...";
   ...
} 

Wygląda na proste, ale wygląda na to, że wyszukuję niepoprawnie, ponieważ nie mogę znaleźć metody.

1
lf80 2 wrzesień 2020, 00:23

3 odpowiedzi

Najlepsza odpowiedź

Najlepszym sposobem jest utworzenie elementu Dummy, skopiowanie zawartości i usunięcie jej z domeny.

// Create a dummy input
var dummy = document.createElement("input");

// Inject the content
dummy.value=copyText;

// Add it to the dom
document.body.appendChild(dummy);

// Select it
dummy.select();

// Copy the content
document.execCommand("copy");

// Clean the dom
document.body.removeChild(dummy);
1
iguypouf 1 wrzesień 2020, 21:34

W ramach szybkiego rozwiązania możesz po prostu umieścić wartość, którą chcesz skopiować, do pola wejściowego (nawet ukrytego) i skopiować w ten sam sposób.

Oto przykład Codepen: https://codepen.io/kshetline/pen/ExKwjjq?editors = 1111

function copyText() {
  document.getElementById('hidden').value = new Date().toLocaleString();
  var copyText = document.getElementById('hidden');
  copyText.select();
  document.execCommand('copy');  
}
<input id="hidden" type="text" style="opacity: 0; position: absolute; top: -5em">
<button type="button" onclick="copyText()">Copy</button><br>
<label for="paste">Paste here: <input id="paste" type="text"></label>

Istnieje jednak bardziej zaawansowany interfejs API do operacji na schowku, który jest opisany w tym artykule: https://web.dev/ async-clipboard /

1
kshetline 1 wrzesień 2020, 22:15

Możesz użyć interfejsu Async Clipboard API:

async function copy() {
  try {
    await navigator.clipboard.writeText(input.value);
    console.log('Value copied to clipboard');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}

Więcej informacji można znaleźć w tym artykule.

0
DenverCoder9 16 grudzień 2020, 13:42