Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery: detect change in input field [duplicate]

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.

like image 858
CL22 Avatar asked Oct 09 '12 10:10

CL22


People also ask

How to check if input value is changed in jQuery?

The change() is an inbuilt method in jQuery that is used to detect the change in value of input fields. This method works only on the “<input>, <textarea> and <select>” elements. Parameter: It accepts an optional parameter “function”. Return Value: It returns the element with the modification.

How do you detect change in text input box?

Answer: Use the input Event You can bind the input event to an input text box using on() method to detect any change in it.

How to detect a textbox's content has changed using jQuery?

In order to detect the text content of input is changed or not, We are using the . on() method of JQuery. This is a built-in method provided by jQuery and is used to attach event handlers for the selected elements and their child elements.

How to detect change in input text JavaScript?

Use any or all of them onchange event, onpropertychange event, onkeyup event, onpaste event and oninput event in the input element and call a function to see the effect. click outside of it to see.


3 Answers

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/

like image 196
Timm Avatar answered Oct 11 '22 01:10

Timm


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

like image 25
Sibu Avatar answered Oct 11 '22 01:10

Sibu


Same functionality i recently achieved using below function.

I wanted to enable SAVE button on edit.

  1. 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.
  2. Key Press doesnt handle Backspace, Delete and Paste options.
  3. 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();
    });


}
like image 12
R Shah Avatar answered Oct 11 '22 00:10

R Shah