CODEWITHSUNDEEP
jquery
Jeriko
Jeriko

Reputation: 6637

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

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?

Upvotes: 225

Views: 564537

Answers (12)

Good and Proper Anthony
Good and Proper Anthony

Reputation: 1

If your wanting to detect a change made after the element has been altered programmatically (i.e, with code) then take a look at MutationObserver API:

https://www.smashingmagazine.com/2019/04/mutationobserver-api-guide/

Upvotes: 0

Amir Sandila
Amir Sandila

Reputation: 43

You can use the following code to detect input, keychange, and keypress.

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

Upvotes: -1

Alejandro Silva
Alejandro Silva

Reputation: 9118

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

Upvotes: 500

Dev Oskii
Dev Oskii

Reputation: 929

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

Upvotes: 4

Nole
Nole

Reputation: 847

This combination of events worked for me:

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

Upvotes: 0

andres
andres

Reputation: 161

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.

Upvotes: 16

mohamad yazdanpanah
mohamad yazdanpanah

Reputation: 39

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

select for browser suggestion

Upvotes: 4

Ishan Jain
Ishan Jain

Reputation: 8171

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

Upvotes: 13

gilamran
gilamran

Reputation: 7294

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

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

Upvotes: 0

Hamed Khosravi
Hamed Khosravi

Reputation: 545

Try this:

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

Upvotes: 2

dknaack
dknaack

Reputation: 60556

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

Upvotes: 114

H Bellamy
H Bellamy

Reputation: 22725

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

Upvotes: 5

Related Questions