Question

我有一系列按钮，当鼠标悬停在按钮上两秒钟后，我想将按钮的值复制到剪贴板。

function getButtonValue(obj) 
{
document.getElementById(obj);
			
var dummy = document.createElement("input");
document.body.appendChild(dummy);
dummy.setAttribute('value', obj.value)
dummy.select();
document.execCommand("copy");
alert("\"" + obj.value + "\" has been copied to the clipboard.");
//	document.body.removeChild(dummy);
			
} // function getButtonValue(obj)

<body>

<input type="button" id="button1" value="bite me 1" onmouseover="setTimeout(()=> getButtonValue(this), 2000);" />
<input type="text" />
<br />
<input type="button" id="button2" value="bite me 2" onmouseover="setTimeout(()=> getButtonValue(this), 2000);" />
<input type="text" />
<br />
<input type="button" id="button3" value="bite me 3" onmouseover="setTimeout(()=> getButtonValue(this), 2000);" />
<input type="text" />
<br />


</body>

我已注释掉“ document.body.removeChild（dummy）;”显示

document.body.appendChild（dummy）;

dummy.setAttribute（'value'，obj.value）;

dummy.select（）;

运行正常。

我没有收到任何控制台错误，但是按钮值是不是被复制到剪贴板。

“ setTimeout（（）=> getButtonValue（this），2000）;”也不起作用-在将“ alert（“ \”“ + obj.value +” \“复制到剪贴板之前，经过了两秒钟。”“;”执行，但是我想要的是鼠标必须在执行“ dummy.setAttribute（'value'，obj.value）”之前将鼠标悬停在按钮上两秒钟。

如果可能的话，我想避免使用jQuery，而只使用javascript，但如有必要，将使用jQuery。

我在运行10.14.3并使用Safari 12.0.3的Mac上执行此操作，但是在Mac上的Chrome浏览器Mac 72.0.3626.109，FireFox Quantum 65.0.1和Opera 58.0.3135.65上得到了相同的错误结果。

我也在从“ localhost”打开页面。

任何帮助将不胜感激。

Answer 1

您需要将setTimeout影响到一个变量中才能执行此操作。如果用户离开按钮，则可以在此变量上使用clearTimeout

<input type="button" id="button1" value="bite me 1" onmouseover="foo = setTimeout(()=> getButtonValue(this), 2000);" onmouseout="clearTimeout(foo)"/>

如果您在2秒钟前离开按钮，则超时将停止

观看现场演示：

var foo, foo2, foo3;

function getButtonValue(obj) {
  const el = document.createElement('textarea');
  el.value = obj.value;
  document.body.appendChild(el);
}

  <input type="button" id="button1" value="bite me 1" onmouseover="foo = setTimeout(()=> getButtonValue(this), 2000);" onmouseout="clearTimeout(foo)" />
  <input type="text" />
  <br />
  <input type="button" id="button2" value="bite me 2" onmouseover="foo2 = setTimeout(()=> getButtonValue(this), 2000);" onmouseout="clearTimeout(foo2)" />
  <input type="text" />
  <br />
  <input type="button" id="button3" value="bite me 3" onmouseover="foo3 = setTimeout(()=> getButtonValue(this), 2000);" onmouseout="clearTimeout(foo3)" />
  <input type="text" />
  <br />

document.execCommand（）方法的“剪切”和“复制”命令可用于将剪贴板的当前内容替换为选定的材料。如果您在短期事件处理程序中将它们用于用户操作（例如，单击处理程序），则可以在没有任何特殊权限的情况下使用这些命令。

Reference

大多数浏览器只会以这种方式将文本复制到剪贴板中，而Javascript是直接从真实用户事件（例如单击或按键）而不是从setTimeout（）启动的。因此，如果您的代码采用setTimeout（）路径，则可能无法将文本复制到剪贴板。您不能只制造按键事件-此限制的全部要点是需要一个真实的用户事件，而不是由代码制造的事件。
如果您有兴趣，这里有一个经过测试的功能，可以在此答案中将文本复制到剪贴板。它具有与其他任何代码相同的限制-必须从由实际用户事件调用的Javascript启动，并且它可以在现代版本的Chrome，Firefox和IE中使用，但不能在Safari中使用。

Reference 1
Reference 2

因此，您不能同时使用setTimout和document.execCommand("copy");。与事件鼠标悬停相同，它不是用户操作的事件处理程序

如果要复制文本，可以使用事件单击，例如：

function getButtonValue(obj) {
  const el = document.createElement('textarea');
  el.value = obj.value;
  document.body.appendChild(el);
  el.select();
  document.execCommand("copy");
  // document.body.removeChild(el);
}

<input type="button" id="button1" value="bite me 1" onclick="getButtonValue(this)" />
<input type="text" />
<br />
<input type="button" id="button2" value="bite me 2" onclick="getButtonValue(this)" />
<input type="text" />
<br />
<input type="button" id="button3" value="bite me 3" onclick="getButtonValue(this)" />
<input type="text" />
<br />

将鼠标悬停在按钮上1秒钟后，复制html按钮的值

1 个答案: