event handler for input delete/undo

Question

I need to check for all events which will change the contents of my text input. so far I have handlers for keyup, cut and paste. but the content can also be changed by highlighting the text and clicking delete or undo. is there a way to listen for these events?

$('#input').on('paste cut  keyup ',function() {
    //add delete and undo to listner
});

score 8 · Accepted Answer · edited May 23 '17 at 11:56

8

You have more problems than this, you also have to worry about browsers with autofill features, etc. For this reason HTML5 has included the input event, which is included in modern browsers.

See this answer for a method of capturing every conceivable change event(*) the browser will let you capture, without firing more than once per change.

_{(*) Looks like they forgot cut, so add that in too.}

edited May 23 '17 at 11:56

Community

1
1

answered Feb 20 '13 at 22:18

Plynx

11,341
3
32
33

thanks for the link I found the answer there its: .bind('DOMAttrModified textInput input change keypress paste focus', function (){ // handle }); – user2014429 Feb 20 '13 at 22:34

score 2 · Answer 2 · answered Feb 20 '13 at 22:16

I'd suggest using keydown and input: http://jsfiddle.net/vKRDR/

var timer;
$("#input").on("keydown input", function(){
    var self = this;
    clearTimeout(timer)
    // prevent event from happening twice
    timer = setTimeout(function(){
        console.log(self.value);
    },0);
});

keyup won't catch special keys such as ctrl, and input will catch things such as paste delete etc, even from context menu.

by using keydown and input, the event happens immediately rather than waiting for the user to release the button or blur the input.

keydown does most of the work, input picks up where keydown can't handle it such as the context menu delete/paste/cut

Note, after further testing... you should be able to get away with just using input, though i'm not sure how backward compatible it is with IE — Kevin B, Feb 20 '13 at 22:40

score 1 · Answer 3 · answered Oct 08 '13 at 14:00

use these, they will get all the changes :

$(container).bind('keyup input propertychange paste change'), function (e){});

also, you could do one thing to check the value inside this onchange event:

$(function(){
  $('input').on('keyup input propertychange paste change', function(){
      if ($(this).data('val')!=this.value) {
          alert('Something has been changed in the input.');
      }
      $(this).data('val', this.value);
  });
});

hopefully, this will work in your case. :)

score 0 · Answer 4 · answered Feb 20 '13 at 22:15

0

You're at least missing keypress and change. I don't know if "change" works with those actions, I do know that change is often just called when the input element loses focus.

answered Feb 20 '13 at 22:15

Master Yogurt

116
4

score 0 · Answer 5 · answered Nov 21 '22 at 12:20

Use this to detect deleting action on input value

document.getElementById("my_id_name").oninput = function(e) {
     if ((e.inputType == 'deleteContentBackward') || (e.inputType == 'deleteContentForward') || (e.inputType == 'deleteByCut')){
            $('my_id_name').value = null
        })
 }

score -1 · Answer 6 · answered Feb 20 '13 at 22:14

-1

Use the change event.

$('#input').on('change', function(){});

answered Feb 20 '13 at 22:14

Iain

2,259
1
16
18

1

Change generally only fires on losing focus. – Plynx Feb 20 '13 at 22:21

event handler for input delete/undo

6 Answers6