Detecting value change of input[type=text] in jQuery

Question

I want to execute a function every time the value of a specific input box changes. It almost works with $('input').keyup(function), but nothing happens when pasting text into the box, for example. $input.change(function) only triggers when the input is blurred, so how would I immediately know whenever a text box has changed value?

Answer 1

Update - 2021

As of 2021 you can use input event for all the events catering input value changes.

$("#myTextBox").on("input", function() {
   alert($(this).val()); 
});

Original Answer

just remember that 'on' is recommended over the 'bind' function, so always try to use a event listener like this:

$("#myTextBox").on("change paste keyup", function() {
   alert($(this).val()); 
});

Answer 2

Description

You can do this using jQuery's .bind() method. Check out the jsFiddle.

Sample

Html

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

jQuery

$("#myTextBox").bind("change paste keyup", function() {
   alert($(this).val()); 
});

More Information

• jsFiddle Demonstration
• jQuery.bind()

Answer 3

Try this.. credits to https://stackoverflow.com/users/1169519/teemu

for answering my question here: https://stackoverflow.com/questions/24651811/jquery-keyup-doesnt-work-with-keycode-filtering?noredirect=1#comment38213480_24651811

This solution helped me to progress on my project.

$("#your_textbox").on("input propertychange",function(){

   // Do your thing here.
});

Note: propertychange for lower versions of IE.

Answer 4

you can also use textbox events -

<input id="txt1" type="text" onchange="SetDefault($(this).val());" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">

function SetDefault(Text){
  alert(Text);
}

Try This

Answer 5

Try this:

Basically, just account for each event:

Html:

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

Jquery:

$("#textbox").keyup(function() { 
    alert($(this).val());  
}); 

$("#textbox").change(function() { 
alert($(this).val());  
}); 

Answer 6

$("#myTextBox").on("change paste keyup select", function() {
     alert($(this).val());
});

select for browser suggestion

Answer 7

DON'T FORGET THE cut or select EVENTS!

The accepted answer is almost perfect, but it forgets about the cut and select events.

cut is fired when the user cuts text (CTRL + X or via right click)

select is fired when the user selects a browser-suggested option

You should add them too, as such:

$("#myTextBox").on("change paste keyup cut select", function() {
   //Do your function 
});

Answer 8

Try this:

$("input").bind({
            paste : function(){
                $('#eventresult').text('paste behaviour detected!');
            }
})

Answer 9

Use this: https://github.com/gilamran/JQuery-Plugin-AnyChange

It handles all the ways to change the input, including content menu (Using the mouse)

Answer 10

This combination of events worked for me:

$("#myTextBox").on("input paste", function() {
   alert($(this).val()); 
});