Блог

Я пытаюсь выяснить, как скопировать строку и вставить из JavaScript.

Этот пример кода:

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

Копии из myInput value :

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

но я пытаюсь скопировать текст из переменной, не включенной в html value :

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

который находится в .js , чтобы разрешить пользователю копировать / вставлять:

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

Это выглядит просто, но, похоже, я неправильно ищу, потому что я не могу найти метод.

Лучший способ — создать фиктивный элемент, скопировать содержимое и удалить его из dom.

 // 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);
  

В качестве быстрого исправления вы могли бы просто вставить значение, которое хотите скопировать, в поле ввода (даже скрытое) и скопировать таким же образом.

Вот пример 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>  

Однако существует более продвинутый API для операций с буфером обмена, который описан в этой статье:https://web.dev/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);
  }
}
  

Для получения более подробной информации, пожалуйста, ознакомьтесь с этой статьей.