jQuery在内容可编辑的div中输入粘贴

Question

There is a contenteditable div as a textarea in my html page:

<div id="txt" contenteditable="true"></div>

I detect the user's input through jquery "input paste"

$('#txt').on('input paste',function(event){
    alert("ok"); 
});

It works fine in chrome, but not working in IE. Could anyone tell me what happened? Thanks~~

Answer 1

IE is returning event.type as paste

$('#txt').on('input paste',function(event){
   if(event.type=='paste' || event.type=='input'){
       alert("ok"); 
   }  
});

EDIT. For some reason I only tested with paste.

$('#txt').on('keyup paste',function(event){
   alert("ok"); 
});

Answer 2

I think this is a problem which is IE specific. Alternate solution is to use focus, keyup event and blur event. You can compare old and new text to see if change is there in text or not.

Just found a SO thread where given answer lined up with my answer; and a link to original SO thread.

$('#txt').on('focus', function() {
  before = $(this).html();
}).on('blur keyup paste', function() { 
  if (before != $(this).html()) { $(this).trigger('change'); }
});

$('#txt').on('change', function() {alert('changed')});

SO Thread