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?
12 Answers
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());
});
9 Comments
Alejandro Silva
@NicolasS.Xu: direct asignation of values doesn't trigger any DOM event
cytsunny
Would be even better if using
console.log() instead of alert. Would be very annoying for keyup to alert.Alejandro Silva
@cytsunny yea sure, alert is annoying, but in this case is an example of the code to be executed on the value change, it really can be any payload you want.
alstr
If you right click and paste, this will return the value of the input prior to the paste.
Heichou
Just noticed the function is performed many times, just
"input" is required without adding anything else |
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
1 Comment
Guido Spadavecchia
Your code triggers the event twice when you write something
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.
Comments
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);
}
Comments
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());
});
Comments
$("#myTextBox").on("change paste keyup select", function() {
alert($(this).val());
});
select for browser suggestion
Comments
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
});
Comments
Try this:
$("input").bind({
paste : function(){
$('#eventresult').text('paste behaviour detected!');
}
})
Comments
Use this: https://github.com/gilamran/JQuery-Plugin-AnyChange
It handles all the ways to change the input, including content menu (Using the mouse)
1 Comment
Ofer Gal
How do You use it? I include it in my HTML and used $("input").anyChange(function (e) { console.log(e); }); But it never got to the console.log line
This combination of events worked for me:
$("#myTextBox").on("input paste", function() {
alert($(this).val());
});
Comments
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/
1 Comment
Ro.oT
Please include relevant information from the link that attempts to answer the question. Link only answers are NOT recommended.
You can use the following code to detect input, keychange, and keypress.
$("#myTextBox").on("input", "keyup", "keydown", "keypress" function() {
alert($(this).val());
});
keyupandpasteevents?pasteis just one that I thought of, I'd rather listen for a definitive change than have to think of all the different incoming paths.cut).