Best Way to Track Onchange As-You-Type in Input Type="Text"

Best way to track onchange as-you-type in input type=text?

Update:

See Another answer (2015).

Original 2009 Answer:

So, you want the onchange event to fire on keydown, blur, and paste? That's magic.

If you want to track changes as they type, use "onkeydown". If you need to trap paste operations with the mouse, use "onpaste" (IE, FF3) and "oninput" (FF, Opera, Chrome, Safari¹).

¹_{Broken for <textarea> on Safari. Use textInput instead}

html input type=text / onchange event not working

onchange is only triggered when the control is blurred. Try onkeypress instead.

Onchange event in a text input behaviour in JavaScript to immediately register changes upon typing?

You could use the onkeyup event instead:

"The onkeyup event handler captures the moment at which a previously
pressed key is released while focus is on the element to which the
onkeyup attribute is applied."

In this case:

<input type="text" onkeyup="checkNumber(document)" id="frm1" autocomplete="off">

jsFiddle here

Note though, that it's always better to keep your markup (HTML) and scripts (JavaScript) separate.

Instead, you could use addEventListener:

var el = document.getElementById("frm1");
el.addEventListener("keyup", checkNumber, false);

jsFiddle here

How do I implement onchange of input type=text with jQuery?

You can use .change()

$('input[name=myInput]').change(function() { ... });

However, this event will only fire when the selector has lost focus, so you will need to click somewhere else to have this work.

If that's not quite right for you, you could use some of the other jQuery events like keyup, keydown or keypress - depending on the exact effect you want.

Detect changed input text box

You can use the input Javascript event in jQuery like this:

$('#inputDatabaseName').on('input',function(e){
    alert('Changed!')
});

In pure JavaScript:

document.querySelector("input").addEventListener("change",function () {
  alert("Input Changed");
})

Or like this:

<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>

Detect all changes to a input type=text (immediately) using JQuery

Unfortunately, I think setInterval wins the prize:

<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>

It's the cleanest solution, at only 1 line of code. It's also the most robust, since you don't have to worry about all the different events/ways an input can get a value.

The downsides of using 'setInterval' don't seem to apply in this case:

The 100ms latency? For many applications, 100ms is fast enough.
Added load on the browser? In general, adding lots of heavy-weight setIntervals on your page is bad. But in this particular case, the added page load is undetectable.
It doesn't scale to many inputs? Most pages don't have more than a handful of inputs, which you can sniff all in the same setInterval.

onchange form input grabs value and submits form

You can use onchange

In your input add this onchange="myFunction()"

Following is an example with input type number

 function myFunction(){     var x = document.getElementById("quantity").value;     console.log(x);}

<input type="number" id="quantity" onchange="myFunction()"/>

html text input onchange event

When I'm doing something like this I use the onKeyUp event.

<script type="text/javascript">
 function bar() {
      //do stuff
 }
<input type="text" name="foo" onKeyUp="return bar()" />

but if you don't want to use an HTML event you could try to use jQuerys .change() method

$('.target').change(function() {
   //do stuff
});

in this example, the input would have to have a class "target"

if you're going to have multiple text boxes that you want to have done the same thing when their text is changed and you need their data then you could do this:

$('.target').change(function(event) {
   //do stuff with the "event" object as the object that called the method
)};

that way you can use the same code, for multiple text boxes using the same class without having to rewrite any code.

Submit Text Type Field OnChange

Your HTML could be like this:

<form name="myForm" id="myForm" method="post" action="...">
<input type="text" value="" name="myInput" id="myInput"/>

Now use jQuery:

<script type="text/javascript">
$(document).ready(function(){
   $('#myInput').live('blur',function(){
      $('#myForm').submit();
   });
});
</script>

This is my jsFiddle: http://jsfiddle.net/mtwLf/1/

Best Way to Track Onchange As-You-Type in Input Type="Text"