it-roy-ru.com

JavaScript не работает в буфер обмена

У меня есть функция в моем скрипте, которая дает мне ошибку. Назначение функции - скопировать текст со статической панели (не текстового поля или ввода) с помощью события onClick.

Uncaught TypeError: copyText.select не является функцией

Я хочу, чтобы пользователь мог щелкнуть текст, и он скопируется в его буфер обмена.

Может быть, вы можете предложить лучшую функцию, которая работает?

https://codepen.io/abooo/pen/jYMMMN?editors=1010

function myFunction() {
  var copyText = document.getElementById("display");
  copyText.select();
  document.execCommand("Copy");
  alert("Copied the text: " + copyText.value);
}

Из w3schools

8
user7570296

Это позволит вам скопировать текст элемента. Хотя я не проверял это со сложной компоновкой.

Если вы хотите использовать это, удалите предупреждения и предоставьте лучший способ сообщить пользователю, что контент был скопирован.

SAFARI: Это не работает в Safari до версии 10.0. Но с Safari 10.0 теперь это работает.

function copyText(element) {
  var range, selection, worked;

  if (document.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToElementText(element);
    range.select();
  } else if (window.getSelection) {
    selection = window.getSelection();        
    range = document.createRange();
    range.selectNodeContents(element);
    selection.removeAllRanges();
    selection.addRange(range);
  }
  
  try {
    document.execCommand('copy');
    alert('text copied');
  }
  catch (err) {
    alert('unable to copy text');
  }
}
<h1 id='display' onClick='copyText(this)'>Text Sample</h1>

Если вы хотите использовать это для элемента <input> или <textarea>, дайте мне знать, что код отличается.

Try/catch предназначен для более старых версий Safari, которые могут вызвать исключение. Поэтому, если вы не планируете поддерживать Safari до версии 10.0, вы можете удалить его.

6
Intervalia

Отличный ответ от Intervalia. 

Небольшое улучшение, иногда элемент, который вы щелкнули, не тот, который вы хотите скопировать.
Поэтому я предлагаю вам передать идентификатор элемента, который вы хотите скопировать. 

<button onClick='copyText("display")'> Copy </button>
<h1 id='display'> Text Sample </h1>

А затем, в первой строке вашей функции сделать 

element = document.getElementById(element); 

Не большая разница, но я думаю, что так полезнее.

1
Hike Nalbandyan

Метод select() используется для выбора содержимого текстовых полей. он не будет работать на элементе h1.

0
mac