填充工具：

Question

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

无论来自哪个 contenteditable div发生更改，都会触发（例如复制/粘贴/拖放/类型等）。

<div contenteditable="true" id="editor">Please type something in here</div>
<script>
document.getElementById("editor").addEventListener("input", function() {
    alert("input event fired");
}, false);
</script>

Answer 1

今天进入这个，这就是我解决它的方式..

解决方案：更改活动名称 - ＆gt; ＆＃34;的TextInput＆＃34;在IE 11中用于事件附件 - 只需确保让其他浏览器使用＆＃34;输入＆＃34;。

示例：

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

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

Answer 2

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

onChange event with contenteditable

Answer 3

如前所述，input元素的contenteditable事件不支持IE。
见compatibility chart。

但是，我们已经知道IE上的工作的事件，那就是keydown事件监听器，但显然它会触发每个键，而不仅仅是添加/删除的键字符，所以应该有一个验证机制。还知道keydown事件不会更新元素的值（其textContent）在被解雇时，但在延迟之后，应该使用settimeout。最后，我们必须嗅探浏览器，只回到IE的这种方法：

填充工具：

// https://stackoverflow.com/a/37199444/104380
var msie = window.document.documentMode;

var elm = document.querySelector('div');

///////////////////////
// bind the events
if( msie ) 
  elm.addEventListener("keydown", onKeydown);
else
  elm.addEventListener("input", onKeydown);

///////////////////////
// events' callbacks
function onKeydown(e){
  // keydown requires a delay for the input's value to actually change
  setTimeout(function(){
      onInput.call(this, e)
  })
}

function onInput(e){
  var value = e.target.textContent.trim();
  
  // vaildate an actual character was pressed and not a non-character key
  if( e.target.lastValue == value ) return;
  
  // save the value on the input state object
  e.target.lastValue = value;

  console.log(value);
}

[contenteditable]{ 
  border:1px solid silver; 
  padding:5px; 
  
}

<div contenteditable></div>

Answer 4

我认为最容易跟踪 contenteditable 元素变化的方法是使用 MutationObserver 。
它可以跟踪子树中的更改，因此您可以处理任何键入。它可以在IE11和所有现代浏览器中使用。
观察者将跟踪所有DOM更改。您将需要使用自己的方式来跳过一些更改。

小例子：

// Node var node = document.getElementById('my-id'); // Config var config = { attributes: false, childList: true, subtree: true }; // Callback var callback = function(records, observer) { console.log('Raise any events here or handle changes directly.'); }; // Start var observer = new MutationObserver(callback); observer.observe(node, config);

IE输入事件是否满足？

4 个答案:

填充工具：