onPaste事件触发时e.target.value为空但console.dir(e.target)显示完整值问题咨询

1. 二者取值结果不一致的原因 #

onPaste 事件的触发时机是粘贴动作执行前，此时剪贴板内容还没有被写入到 input 元素的 value 属性中，因此事件触发瞬间直接读取 e.target.value 拿到的是粘贴前的空值。
而 console.dir 打印 DOM 对象时，浏览器对对象属性的展示采用惰性求值逻辑：当你在控制台手动点开这个对象查看属性的时刻，粘贴动作已经执行完成，input 的 value 已经被更新为粘贴后的内容，因此看到的是最终的 value 值。二者的实际读取时机不同，才导致了结果不一致。

2. 正确获取粘贴字符串的方法 #

粘贴事件触发时，剪贴板内容会挂载在事件对象的 clipboardData 属性上，直接从该对象中读取对应格式的内容即可：

function handleOnPaste(e) {
  // 读取剪贴板中的纯文本内容
  const pastedString = e.clipboardData.getData('text/plain')
  console.log(pastedString) // 输出 "A string I pasted"

  // 如果需要自行控制内容写入逻辑，可以阻止默认粘贴行为
  // e.preventDefault()
  // e.target.value = pastedString
}

如果需要读取其他格式的内容，可修改 getData 的入参：比如读取 HTML 格式内容传入 text/html，读取粘贴的图片等文件可通过 e.clipboardData.files 遍历获取。

内容的提问来源于stack exchange，提问作者JimmyTheCode