jquery on input paste in contenteditable 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~~

IE doesn't support the `input` event on `contenteditable` elements. — Ram, Sep 18 '15 at 07:42
**[Notes](https://connect.microsoft.com/IE/feedback/details/794285/ie10-11-input-event-does-not-fire-on-div-with-contenteditable-set)** — Guruprasad J Rao, Sep 18 '15 at 07:46

BenG · Accepted Answer · 2015-09-18T07:56:23.970

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

edited Sep 18 '15 at 07:56

answered Sep 18 '15 at 07:45

BenG

14,826
5
45
60

I delete the if statement, but there is not alert dialog, either. – Jerry Sep 18 '15 at 07:50

score 0 · Answer 2 · edited May 23 '17 at 11:46

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

jquery on input paste in contenteditable div

2 Answers2