139

I found that jQuery change event on a textbox doesn't fire until I click outside the textbox.

HTML:

<input type="text" id="textbox" />

JS:

$("#textbox").change(function() {alert("Change detected!");});

See demo on JSFiddle

My application requires the event to be fired on every character change in the textbox. I even tried using keyup instead...

$("#textbox").keyup(function() {alert("Keyup detected!");});

...but it's a known fact that the keyup event isn't fired on right-click-and-paste.

Any workaround? Is having both listeners going to cause any problems?

1
  • ^^ This. You can have as many event handlers as you like. Commented Jun 26, 2013 at 10:26

7 Answers 7

311

Binding to both events is the typical way to do it. You can also bind to the paste event.

You can bind to multiple events like this:

$("#textbox").on('change keyup paste', function() {
    console.log('I am pretty sure the text box changed');
});

If you wanted to be pedantic about it, you should also bind to mouseup to cater for dragging text around, and add a lastValue variable to ensure that the text actually did change:

var lastValue = '';
$("#textbox").on('change keyup paste mouseup', function() {
    if ($(this).val() != lastValue) {
        lastValue = $(this).val();
        console.log('The text box really changed this time');
    }
});

And if you want to be super duper pedantic then you should use an interval timer to cater for auto fill, plugins, etc:

var lastValue = '';
setInterval(function() {
    if ($("#textbox").val() != lastValue) {
        lastValue = $("#textbox").val();
        console.log('I am definitely sure the text box realy realy changed this time');
    }
}, 500);
11
  • 11
    Finally someone read the question and answered the whole thing! Commented Jun 26, 2013 at 10:30
  • 4
    .on('change keyup paste', function() {...} actually fires multiple times! If I typed a character, and then clicked outside, 'change' and 'keyup' events are both fired, leading to the function being executed multiple times! If I right-click-pasted and then clicked outside, 'change' and 'paste' are both fired. Heck! On using Ctrl+V to paste and then clicking outside fires it thrice!!
    – SNag
    Commented Jun 26, 2013 at 10:44
  • 1
    @SNag yes, so likewise you should add a check using a lastValue variable to ensure it actually has changed.
    – Petah
    Commented Jun 26, 2013 at 10:44
  • 1
    +1. However, is binding to 'change' even necessary here? It's not clear to me what case that would handle that wouldn't already have been handled by the time it (change) fired.
    – Madbreaks
    Commented Dec 9, 2013 at 18:23
  • 1
    The paste event is fired before the text is actually pasted Commented Apr 14, 2015 at 1:54
88

On modern browsers, you can use the input event:

DEMO

$("#textbox").on('input',function() {alert("Change detected!");});
3
  • 1
    Nice - I wasn't aware of that. Is it a HTML5 thing? Commented Jun 26, 2013 at 10:31
  • 4
    I would've loved to accept this answer, but like you said, this is a solution for modern browsers. My web application is targetted at users still using IE8, and this doesn't work on IE8. :( What can I say.. :(
    – SNag
    Commented Jun 26, 2013 at 11:08
  • Does not fire if for example select all text and hit delete key
    – jjxtra
    Commented Jan 20, 2019 at 22:39
4
$(this).bind('input propertychange', function() {
        //your code here
    });

This is works for typing, paste, right click mouse paste etc.

2
  • 1
    This seems like the best solution because it does not fire multiple events if you do something like hit the up arrow on a numeric field.
    – Justin
    Commented Jan 24, 2017 at 17:27
  • 1
    Simple and efficient solution Commented Jan 9, 2020 at 9:52
4
if you write anything in your textbox, the event gets fired.
code as follows :

HTML:

<input type="text" id="textbox" />

JS:

<script type="text/javascript">
  $(function () {
      $("#textbox").bind('input', function() {
      alert("letter entered");
      });
   });
</script>
0
2

Try this:

$("#textbox").bind('paste',function() {alert("Change detected!");});

See demo on JSFiddle.

4
  • As the question is on paste it doesn't work. event isn't fired on right-click-and-paste. Commented Jun 26, 2013 at 10:26
  • And what has that got to do with the use of bind()? Commented Jun 26, 2013 at 10:28
  • he told that he the keyup event is not fired when right click + paste on it, so keyup and change() has their own typical behaviour so id he wants to execute event then paste might be the option Commented Jun 26, 2013 at 10:30
  • Of course, but that still doesn't answer why the use of bind instead of on. Commented Jun 26, 2013 at 10:31
0

Try the below Code:

$("#textbox").on('change keypress paste', function() {
  console.log("Handler for .keypress() called.");
});
3
  • How does that capture pasting with the mouse, as mentioned in the question? Commented Jun 26, 2013 at 10:26
  • keypress is suitable since he said that event to be fired on every character change in the textbox
    – Venkat.R
    Commented Jun 26, 2013 at 10:28
  • If you'd read all the question you'd see he also said, "...but it's a known fact that the keyup event isn't fired on right-click-and-paste." Commented Jun 26, 2013 at 10:28
0

Reading your comments took me to a dirty fix. This is not a right way, I know, but can be a work around.

$(function() {
    $( "#inputFieldId" ).autocomplete({
        source: function( event, ui ) {
            alert("do your functions here");
            return false;
        }
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.