Блог

Главная - Вопросы по программированию - Копирование без видимого текстового поля

Копирование без видимого текстового поля

#javascript

#javascript

Вопрос:

Я создал кнопку, которая копирует значение текстового поля, мне не нужно, чтобы текст был видимым, но если для параметра display установлено значение none, функция копирования прерывается.

 function copyfunction() {
  var copyText = document.getElementById("copydata");
  copyText.select();
  document.execCommand("copy");
  alert("Copied the text: "   copyText.value);
}  
 <input type="text" value="I will be copied" id="copydata">
<button class="button copy" onclick="copyfunction()">Copy</button>

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

Ответ №1:

Вы могли бы создать временный ввод, смотрите пример ниже:

 function setClipboard(value) {
    var tempInput = document.createElement("input");
    tempInput.style = "position: absolute; left: -1000px; top: -1000px";
    tempInput.value = value;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);
}  
 <button class="button copy" onclick="setClipboard('I will be copied')">Set Clipboard</button>

Ответ №2:

Вы могли бы использовать новый метод writeText в буфере обмена API, который поддерживается большинством современных браузеров (подробнее см. Могу ли я использовать).

 //If you want to copyText from Input
function copyTextFromInput(elementID) {
  let element = document.getElementById(elementID); //select the element
  let elementText = element.value; //get the text content from the input element's value field
  copyText(elementText); //use the copyText function below
  alert('Copied:'   elementText); 
}

//If you only want to put some Text in the Clipboard just use this function
// and pass the string to copied as the argument.
function copyText(text) {
  navigator.clipboard.writeText(text);
}  
 <input id="mytext" style="display:none;" type="text" value="Some Text to be copied"></input>
<button onclick="copyTextFromInput('mytext')">Copy</button>

Если вы хотите использовать это непосредственно для некоторого текста в div или другом элементе, вы можете использовать следующее:

 //If you want to copyText from Element
function copyTextFromElement(elementID) {
  let element = document.getElementById(elementID); //select the element
  let elementText = element.textContent; //get the text content from the element
  copyText(elementText); //use the copyText function below
  alert('Copied: '   elementText);
}

//If you only want to put some Text in the Clipboard just use this function
// and pass the string to copied as the argument.
function copyText(text) {
  navigator.clipboard.writeText(text);
}  
 <div id="mytext">This is some text that needs to be copied</div>
<button onclick="copyTextFromElement('mytext')">Copy</button>

Ответ №3:

Вам просто нужно установить type="hidden" , и он выполнит вашу работу. Как показано ниже:-

 function copyfunction() {
  var copyText = document.getElementById("copydata");
  copyText.select();
  document.execCommand("copy");
  alert("Copied the text: "   copyText.value);
}  
 <input type="hidden" value="I will be copied" id="copydata">
<button class="button copy" onclick="copyfunction()">Copy</button>

Ответ №4:

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

 function copyfunction() {
  var copyText = document.getElementById("copydata");
  copyText.select();
  document.execCommand("copy");
  alert("Copied the text: "   copyText.value);
}  
 <input type="text" placeholder="I will be copied" id="copydata">
<button class="button copy" onclick="copyfunction()">Copy</button>