admin 管理员组

文章数量: 1087134

I have a span with contenteditable tag and I have a function used to detect input into it..

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

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

This works for me on Chrome but not on the IE 11 or below. I can't seem to find any mention of it online and was wondering if anyone could give me information on how to get this working or a better approach.

Thanks

I have a span with contenteditable tag and I have a function used to detect input into it..

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

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

This works for me on Chrome but not on the IE 11 or below. I can't seem to find any mention of it online and was wondering if anyone could give me information on how to get this working or a better approach.

Thanks

  • javascript
  • jquery
  • html
  • internet-explorer
  • google-chrome
Share Improve this question asked May 29, 2014 at 9:58 RichardMcRichardMc 8541 gold badge9 silver badges35 bronze badges 3
  • would you post some markup for it, my suggestion is to delegate to the static parent of this element not document. – Jai Commented May 29, 2014 at 10:05
  • I would go to the static parent, but for some reason that does not work with dynamically generated html. this seems to be the only way I can connect with the elements. – RichardMc Commented May 29, 2014 at 10:20
  • JamesDonnely has answered it. Its a reported bug, so you can't do anything about it but you can do a workaround to it. – Jai Commented May 29, 2014 at 10:22
Add a ment  | 

3 Answers 3

Reset to default 6

This is a reported bug (#794285) in IE10 and IE11: contenteditable elements do not fire the input event.

A workaround be to handle different event types alongside input, such as keypress, paste and change:

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

JSFiddle demo.

Maybe try a more widely supported event like keydown or keypress instead of input?

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

This is a little plicated, it might use some refactoring, but here you go :

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

Basically, you "catch" the span when the document is loaded and you add an event listener each time the user presses a key.

Good luck!

本文标签： javascript(document)on(quotinputquot quotSomeClassquot) works on Chrome but not IEStack Overflow

版权声明：本文标题：javascript - $(document).on(&quot;input&quot;,&quot;.SomeClass&quot;) works on Chrome but not IE - Stack Overflo 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744025036a2520482.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。