Скопируйте значение из ввода в буфер обмена, нажав на другую кнопку ввода типа, используя JS

Question

Я хочу скопировать значение text-type-input в буфер обмена, щелкнув по другому button-type-input.Первоначально я хотел, чтобы даже text-type-input был button-type-input, но не смог найти метод для копирования значения button-type-input в буфер обмена.

Код можно найти по адресу https://jsfiddle.net/aQwus/t6t69ppb/2/

В данный момент значение не копируется.Пожалуйста, предложите способ сделать это и способ скопировать значение button-type-input в буфер обмена.

Answer 1

Попробуйте это

var formData = new FormData(document.querySelector('form'));
//or document.getElementById('id_form')

var str = JSON.stringify(formData);
str.select();
document.execCommand("Copy");

Answer 2

Попытка скопировать значение скрытого ввода вызывает здесь беспокойство, поэтому сначала раскройте его

Просто нужно изменить порядок строк кода.Напишите id1.style.display = "block"; перед командами копирования.

var id1 = document.getElementById('id1');
var id2 = document.getElementById('id2');

id2.onclick = function() {
  
    id1.style.display = "block";
  
    //copying the value to clipboard
    id1.select();
    document.execCommand('copy');
  
    id2.style.display = "none";
}

<input id="id1" type="text" value="text text text!" style="display:none">
<input id="id2" type="button" value="Copy text">

Answer 3

Просто, просто прослушайте событие нажатия кнопки, используя функцию element.addEventListener.

function copyTextToClipboard() {

  var id1 = document.querySelector('#id1');

  //copying the value to clipboard
  id1.select();
  document.execCommand("Copy");

  alert("Copied");

}

var id2 = document.querySelector('#id2');

id2.addEventListener("click", copyTextToClipboard);

<input id="id1" type="text" value="text text text!">
<input id="id2" type="button" value="Copy text">

Вот скрипка .