html text input onchange event

is there a way to implement a text change event to detect text change on an HTML input text field?
It’s possible to simulate these using key events (key press etc), however, it’s really not performant and difficult, is there a better way?

28 thoughts on “html text input onchange event”

  1. 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.

  2. I used this line to listen for input events from javascript.
    It is useful because it listens for text change and text pasted events.

    myElement.addEventListener('input', e => { myEvent() });
  3. onChange doesn’t fire until you lose focus later. If you want to be really strict with instantaneous changes of all sorts, use:

       type       = "text" 
       onchange   = "myHandler();"
       onkeypress = "this.onchange();"
       onpaste    = "this.onchange();"
       oninput    = "this.onchange();"
  4. Well unless I misunderstand you can just use the onChange attribute:

    <input type="text" onChange="return bar()">

    Note: in FF 3 (at least) this is not called until some the user has confirmed they are changed either by clicking away from the element, clicking enter, or other.


Leave a Comment