Internet explorer contenteditable的IE输入事件？

我想知道IE11中是否有支持contenteditable输入事件的polyfill

我特别谈到这一事件：

每当contenteditable div上发生更改时，无论源是什么（例如复制/粘贴/拖放/类型等），都会触发该命令

请在这里键入内容
document.getElementById（“编辑器”）.addEventListener（“输入”，函数（）{
警报（“触发输入事件”）；
}，假）；

我认为目前还没有现成的polyfill解决方案，但人们已经根据自己的需要编写了自己的解决方案。也许这可以帮助你：

---

今天遇到了这个问题，我就是这样解决的

解决方案：更改事件名称-->“textinput”在IE 11中用于事件附件-只需确保让其他浏览器使用“input”

例如：

    //Check for IE ('Trident')
    var eventType = /Trident/.test( navigator.userAgent ) ? 'textinput' : 'input';

    //Attach your event
    this.refs.captionInput.addEventListener( eventType, this.handleChangeCaption );

---

如前所述，

contenteditable

元素的

input

事件在IE上不受支持。
看

但是，我们已经知道，在IE上确实起作用的事件是

keydown

事件侦听器，但显然它会在每个键上触发，而不仅仅是添加/删除字符的键，因此应该有一个验证机制。 另外，众所周知，

keydown

事件不会更新元素的值 （其

textContent

）在激发时，但在延迟之后，因此应使用

settimeout

。 最后，我们必须嗅探浏览器，以便仅针对IE使用此方法：

polyfill：

//https://stackoverflow.com/a/37199444/104380
var msie=window.document.documentMode；
var elm=document.querySelector（'div'）；
///////////////////////
//约束事件
如果（msie）
elm.addEventListener（“键控”，onKeydown）；
其他的
elm.addEventListener（“输入”，onKeydown）；
///////////////////////
//事件的回调
函数onKeydown（e）{
//keydown需要一个延迟，以使输入值实际更改
setTimeout（函数（）{
onInput.call（此，e）
})
}
输入函数（e）{
var value=e.target.textContent.trim（）；
//VALIDATE按的是实际字符，而不是非字符键
if（e.target.lastValue==value）返回；
//保存输入状态对象上的值
e、 target.lastValue=value；
console.log（值）；
}

[contenteditable]{
边框：1px纯银；
填充物：5px；
}

---

我认为跟踪contenteditable元素更改的最简单方法是使用
它可以跟踪子树中的更改，所以您可以处理任何键入。它适用于IE11和所有现代浏览器。
Observer将跟踪所有DOM更改。您需要使用自己的方式跳过一些更改

小例子：

//节点
var node=document.getElementById（'my-id'）；
//配置
var config={attributes:false，childList:true，subtree:true}；
//回拨
var callback=函数（记录、观察者）{
log（'在此处引发任何事件或直接处理更改'）；
};
//开始
var observer=新的MutationObserver（回调）；
observer.observe（节点，配置）；

您找到polyfill了吗？如果没有，就需要有人写这篇文章。我不认为textinput为删除注册事件。我可以确认

元素。addEventListener（'textinput'，…）

在IE11中不会在退格时触发。谢谢@MichaelGlass！虽然这可能不会捕获粘贴/剪切/拖放actions@Hailwood-您可以添加这些事件，我刚刚概述了入侵IE工作场景的基本原则

    //Check for IE ('Trident')
    var eventType = /Trident/.test( navigator.userAgent ) ? 'textinput' : 'input';

    //Attach your event
    this.refs.captionInput.addEventListener( eventType, this.handleChangeCaption );