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

Question

示例：

<!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>

当我单击“单击我”按钮时，文本框中当前的内容会正确显示在其下方。当用户粘贴到框中时，我希望自动发生同样的行为。所以我给文本框添加一个事件监听器监听粘贴。

但是，此粘贴侦听器中的代码适用于粘贴前文本框中的内容。即如果文本框中有“a”，用户将“b”粘贴到文本框中，则下面只会显示“a”（而不是“ab”）。

粘贴完成后如何让事件监听的代码生效？

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

Answer 1

How do I make the event listener's code take effect after the paste is complete?

您可以使用 .getData():

The DataTransfer.getData() method retrieves drag data (as a DOMString) for the specified type. If the drag operation does not include data, this method returns an empty string.

为了获取剪贴板数据，您需要根据 documentation.

将事件参数用于粘贴事件处理程序

片段：

function coolFunction() {
  word = document.getElementById("myText").value;
  document.getElementById("enteredBox").innerHTML = word;
}

document.getElementById('myText').addEventListener('paste', function(e)  {
  // get the data from the clipboard.....
  var txt = e.clipboardData.getData('text');
  
  // use the data
  document.getElementById("enteredBox").innerHTML = txt;
});

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

或者，如果您需要在粘贴操作完成后获取数据，您可以使用 .setTimeout() 延迟点击事件。在这种情况下，您的代码：

document.getElementById("coolButton").click();

变为：

setTimeout(() => document.getElementById("coolButton").click(), 10)

片段：

//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', (e)  =>
   setTimeout(() => document.getElementById("coolButton").click(), 10)
);

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

最后一个解决方案可以完全避免按钮，它可以基于input event。

片段：

document.getElementById('myText').addEventListener('input', function(e)  {
    word = document.getElementById("myText").value;
    document.getElementById("enteredBox").innerHTML = word;
});

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



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

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

How to addEventListener that takes effect on the state after a paste (instead of right before it)?

javascript

html

events

listener

copy-paste