我的组件中有以下元素:
<div className="document" contentEditable="true" placeholder="Write something...." ref={this.document} onBlur={this.onBlur} onInput={this.onInput} dangerouslySetInnerHTML={{__html: document.content}}></div>
下面是函数onInput
:
onInput(event) {
event = event.nativeEvent;
console.log(event.dataTransfer); // This is null
}
我想使用 dataTransfer
来确定是否粘贴/删除了某些内容,而不监听每个人的特定事件,以便从 InputEvent
管理所有内容(因为 InputEvent
会触发我已经想听的大多数操作)
甚至 MDN 上的示例也无法正常工作,因为 dataTransfer
为 null
:
https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/dataTransfer
为什么会发生这种情况?这是尚未实现的标准吗?
最佳答案
MDN 示例适用于 Firefox,但不适用于 Chrome。另一方面,在同一个 MDN 示例中,在 Chrome 中监听 beforeinput
而不是 input
有效,但在 Firefox 中无效。因此,结合使用这两个事件应该可以在两个浏览器上运行。
据我所知,specification表示在这两种情况下都应该设置该属性。
关于javascript - InputEvent.dataTransfer 始终为 null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59751598/