1

最近，我注意到粘贴事件的一个奇怪行为：函数触发后，输入元素的值被更新！如果您只是将值本身或 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)">

4

0 回答 0