首页 > 解决方案 > PASTE 事件是异步的吗?处理这个问题的最佳方法是什么?

问题描述

最近,我注意到粘贴事件的一个奇怪行为:函数触发,输入元素的值被更新!如果您只是将值本身或 event.target.value 传递给函数,则该函数将获得旧的输入值;我发现的唯一解决方法是event.target.value在输入值已经更新的一些小的随机时间后设置超时并处理。是否有更好的解决方案(例如,类似event.oncomplete的东西,它允许使用 Promise API 并在粘贴操作完成并且输入元素的值已经更新后解决一个 Promise?

下面是一个可运行的演示代码片段,显示了这种情况——如果没有设置超时,输入元素的值会在粘贴完成之前由函数进行评估和更改:

function alertValue({ target: t }) {
  const [run, delay] = [() => {
    alert(`The value is: "${t.value}".`);
    t.value = '';
  }, document.getElementById('sel').value];
  delay ? setTimeout(run, 10) : run();
}
<h1>Paste event demo</h1>
<select id="sel">
  <option value="">Without timeout</option>
  <option value="1">WITH timeout</option>
</select><br>
<label>Paste something here:</label><br>
<input type="text" onpaste="alertValue(event)">

标签: javascripthtmleventspasteonpaste

解决方案


推荐阅读