JQuery detect change in input field

Question

I want to detect when a user s keyboard actions alter the value of a text field  It should work consistently across modern browsers   The JQuery page for the  keypress event says it s not consistent  Also  it doesn t work for backspace  delete etc   I can t use  keydown as it is because it reacts to shift  alt and arrow keys etc  Also  it doesn t fire more than once when the user holds down a key and multiple characters are inserted   Is there a concise method I m missing  Or should I use  keydown and filter out events that are triggered by arrow keys  shift and so on  My main concern is there will be keys that I m not aware should be filtered   I nearly forgot about alt and ctrl  I suppose there could be others  But then how would I detect the key being held down and inserting multiple characters   As a bonus it would detect changes due to pasting  including right-clicking  but I have the solution to that from here

User · Answer

Same functionality i recently achieved using below function.

I wanted to enable SAVE button on edit.

Change event is NOT advisable as it will ONLY be fired if after editing, mouse is clicked somewhere else on the page before clicking SAVE button.
Key Press doesnt handle Backspace, Delete and Paste options.
Key Up handles everything including tab, Shift key.

Hence i wrote below function combining keypress, keyup (for backspace, delete) and paste event for text fields.

Hope it helps you.

function checkAnyFormFieldEdited() {
    /*
     * If any field is edited,then only it will enable Save button
     */
    $(':text').keypress(function(e) { // text written
        enableSaveBtn();
    });

    $(':text').keyup(function(e) {
        if (e.keyCode == 8 || e.keyCode == 46) { //backspace and delete key
            enableSaveBtn();
        } else { // rest ignore
            e.preventDefault();
        }
    });
    $(':text').bind('paste', function(e) { // text pasted
        enableSaveBtn();
    });

    $('select').change(function(e) { // select element changed
        enableSaveBtn();
    });

    $(':radio').change(function(e) { // radio changed
        enableSaveBtn();
    });

    $(':password').keypress(function(e) { // password written
        enableSaveBtn();
    });
    $(':password').bind('paste', function(e) { // password pasted
        enableSaveBtn();
    });


}

User · Answer

Use jquery change event      Description  Bind an event handler to the  change  JavaScript event    or trigger that event on an element    An example      input type  text     change  function          your code       The advantage that  change has over  keypress    focus    blur is that  change event will fire only when input has changed

User · Answer

You can use jQuery change   function     input   change function        your codes       There are examples on how to use it on the API Page  http   api jquery com change

User · Answer

Use   on   to bind your chosen event to the input  don t use the shortcuts like   keydown   etc because as of jQuery 1 7   on   is the preferred method to attach event handlers  see here  http   api jquery com on  and http   api jquery com bind       keydown   is just a shortcut to   bind  keydown    and   bind   is what   on   replaces  among others    To answer your question  as far as I m aware  unless you need to fire an event on keydown specifically  the change event should do the trick for you      element   on  change   function        console log  change          To respond to the below comment  the javascript change event is documented here  https   developer mozilla org en-US docs Web Events change  And here is a working example of the change event working on an input element  using jQuery  http   jsfiddle net p1m4xh08

User · Answer

You can bind the  input  event to the textbox  This would fire every time the input changes  so when you paste something  even with right click   delete and type anything       myTextbox   on  input   function            do something       If you use the change handler  this will only fire after the user deselects the input box  which may not be what you want    There is an example of both here  http   jsfiddle net 6bSX6

[jquery] JQuery: detect change in input field

Examples related to jquery

Examples related to keypress