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

简单，只需使用element.addEventListener函数侦听按钮的click事件。

＆＃13;

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

＆＃13;

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

＆＃13;

以下是fiddle。

Answer 2

试试这个

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

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

Answer 3

尝试复制隐藏输入的值令人不安，所以首先取消隐藏

只需要更改代码行的顺序即可。在复制命令之前写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">

通过使用JS单击另一个按钮类型输入，将值从输入复制到剪贴板

3 个答案: