$(document).on("input",".SomeClass") 适用于 Chrome 但不适用于 IE答案

【问题标题】：$(document).on("input",".SomeClass") works on Chrome but not IE$(document).on("input",".SomeClass") 适用于 Chrome 但不适用于 IE
【发布时间】：2014-07-18 19:10:06
【问题描述】：

我有一个带有 contenteditable 标记的跨度，并且我有一个用于检测其中输入的函数..

//TextArea
<span class="SomeClass" contenteditable></span>

//Function
$(document).on("input", ".SomeClass", function () {
    console.log("input entered");
});

这适用于我的 Chrome，但不适用于 IE 11 或更低版本。我似乎在网上找不到任何提及它的内容，并且想知道是否有人可以向我提供有关如何使其正常工作或更好方法的信息。

谢谢

【问题讨论】：

你能给它贴一些标记吗，我的建议是委托给这个元素的静态父级而不是文档。
我会转到静态父级，但由于某种原因，它不适用于动态生成的 html。这似乎是我与元素联系的唯一方式。
JamesDonnely 已经回答了。这是一个已报告的错误，因此您无能为力，但您可以解决它。

标签： javascript jquery html internet-explorer google-chrome

【解决方案1】：

这是 IE10 和 IE11 中的 a reported bug (#794285)：contenteditable 元素不会触发 input 事件。

解决方法是在input 旁边处理不同的事件类型，例如keypress、paste 和change：

$(document).on("input keypress paste change", ".SomeClass", function () {
    console.log("input entered");
});

JSFiddle demo.

【讨论】：

嗯，这很不幸，无论如何，这是一个足够的解决方案，谢谢。 IE 是不是很棒！
@RichardMc 是在讽刺 IE 还是真的在称赞它？ :)
@jabahar 可能只是一点点讽刺。

【解决方案2】：

也许尝试更广泛支持的事件，例如 keydown 或 keypress，而不是输入？

$(document).on("keypress", ".SomeClass", function () {
    console.log("input entered");
});

【讨论】：

【解决方案3】：

这有点复杂，它可能会使用一些重构，但是你去吧：

var initialState;
$( document ).ready(function() {
    initialState = document.getElementById("span").innerHTML;
});

$(document).keydown( function () {
    var currentState =  document.getElementById("span").innerHTML;
   if( initialState != currentState) {

 console.log("Content changed!");
 }
 });

基本上，您在加载文档时“捕获”跨度，并在用户每次按键时添加一个事件侦听器。

祝你好运！

【讨论】：