Question

我有一个带有contenteditable标签的span，我有一个用来检测输入的函数..

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

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

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

由于

Answer 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

Answer 2

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

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

Answer 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!");
 }
 });

基本上，你＆＃34;赶上＆＃34;加载文档时的跨度，每次用户按下键时添加事件监听器。

祝你好运！

$（文档）.on（＆＃34;输入＆＃34;，＆＃34; .SomeClass＆＃34;）适用于Chrome但不适用于IE

3 个答案: