Javascript 如何在粘贴后（而不是粘贴前）添加对状态生效的EventListener？_Javascript_Html_Events_Listener_Copy Paste

Javascript 如何在粘贴后（而不是粘贴前）添加对状态生效的EventListener？

javascript html events

Javascript 如何在粘贴后（而不是粘贴前）添加对状态生效的EventListener？,javascript,html,events,listener,copy-paste,Javascript,Html,Events,Listener,Copy Paste,例如： <!DOCTYPE html> <html> <body> <input type="text" id="myText" value="some text"> <button id='coolButton' onclick="coolFunction()">Click me</button> <br><br>

例如：

<!DOCTYPE html>
<html>
<body>

<input type="text" id="myText" value="some text">

<button id='coolButton' onclick="coolFunction()">Click me</button>

<br><br>
<span>Entered:</span>
<span id="enteredBox"></span>

<script>

//display whatever is in the textbox in a text span below it 
function coolFunction() {
  word = document.getElementById("myText").value; 
  document.getElementById("enteredBox").innerHTML = word;
}

//trigger coolFunction() whenever something is pasted into the text box
document.getElementById('myText').addEventListener('paste', () => {
  document.getElementById("coolButton").click();
});

</script>

</body>
</html>


点击我



进入：
//在文本框下方的文本范围内显示文本框中的内容
函数coolFunction（）{
word=document.getElementById（“myText”）.value；
document.getElementById（“enteredBox”）.innerHTML=word；
}
//在文本框中粘贴内容时触发coolFunction（）
document.getElementById（'myText'）。addEventListener（'paste'，（）=>{
document.getElementById（“coolButton”）。单击（）；
});

当我单击“单击我”按钮时，文本框中当前的内容将正确显示在其下方。我希望在用户粘贴到框中时自动发生相同的行为。因此，我向文本框添加了一个事件侦听器，用于侦听粘贴

但是，此粘贴侦听器中的代码处理粘贴之前文本框中的内容。i、 e.如果文本框中有“a”，并且用户将“b”粘贴到框中，则下面只显示“a”（而不是“ab”）

粘贴完成后，如何使事件侦听器的代码生效

我尝试过强迫它等待几秒钟，或者在单独的元素中显示，但是粘贴函数代码总是在粘贴之前而不是之后读取框中的内容

粘贴完成后，如何使事件侦听器的代码生效

您可以使用：

getData（）方法检索拖动数据（作为DOMString）对于指定的类型。如果拖动操作不包括数据，此方法返回一个空字符串

为了获取剪贴板数据，您需要按照将事件参数用于粘贴事件处理程序

片段：

函数coolFunction（）{
word=document.getElementById（“myText”）.value；
document.getElementById（“enteredBox”）.innerHTML=word；
}
document.getElementById（'myText'）。addEventListener（'paste'，函数（e）{
//从剪贴板获取数据。。。。。
var txt=e.clipboardData.getData（'text'）；
//使用数据
document.getElementById（“enteredBox”）.innerHTML=txt；
});

点击我



进入：
非常感谢您，这两项工作都很出色。你介意再解释一下第一种直接从剪贴板上阅读的方法吗？我不明白为什么e
变量会包含剪贴板信息。我认为e
总是有错误信息。Mozilla文档也有点混乱，因为剪贴板API上有一个单独的页面，其中有一个同名函数…@JamesRonald事件侦听器中的e变量就是事件。我更新了答案，添加了对文档的引用。我希望它能帮助你。谢谢