How to detect a textbox's content has changed

user_154510 0
Viewed 555340

I want to detect whenever a textbox's content has changed. I can use the keyup method, but that will also detect keystrokes which do not generate letters, like the arrow keys. I thought of two methods of doing this using the keyup event:

  1. Check explictly if the ascii code of the pressed key is a letter\backspace\delete
  2. Use closures to remember what was the text in the textbox before the key stroke and check whether this has changed.

Both look kinda cumbersome.

keypress textbox jquery javascript
15 Answers

Start observing 'input' event instead of 'change'.

jQuery('#some_text_box').on('input', function() {
    // do your stuff
});

...which is nice and clean, but may be extended further to:

jQuery('#some_text_box').on('input propertychange paste', function() {
    // do your stuff
});
user_13049940

I assume that you are looking to do something interactive when the textbox changes (i.e. retrieve some data via ajax). I was looking for this same functionality. I know using a global isn't the most robust or elegant solution, but that is what I went with. Here is an example:

var searchValue = $('#Search').val();
$(function () {
    setTimeout(checkSearchChanged, 0.1);
});

function checkSearchChanged() {
    var currentValue = $('#Search').val();
    if ((currentValue) && currentValue != searchValue && currentValue != '') {
        searchValue = $('#Search').val();
        $('#submit').click();
    }
    else {
        setTimeout(checkSearchChanged, 0.1);
    }
}

One key thing to note here is that I am using setTimeout and not setInterval since I don't want to send multiple requests at the same time. This ensures that the timer "stops" when the form is submitted and "starts" when the request is complete. I do this by calling checkSearchChanged when my ajax call completes. Obviously you could expand this to check for minimum length, etc.

In my case, I am using ASP.Net MVC so you can see how to tie this in with MVC Ajax as well in the following post:

http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx

user_5502140

This Code detects whenever a textbox's content has changed by the user and modified by Javascript code.

var $myText = jQuery("#textbox");

$myText.data("value", $myText.val());

setInterval(function() {
    var data = $myText.data("value"),
    val = $myText.val();

    if (data !== val) {
        console.log("changed");
        $myText.data("value", val);
    }
}, 100);
user_85228460 
document.getElementById('txtrate' + rowCount).onchange = function () {            
       // your logic
};

This one works fine but triggers the event on click too which is not good. my system went into loop. while

$('#txtrate'+rowCount).bind('input', function() {
        //your logic
} );

works perfectly in my scenario. it only works when value is changed. instead of $ sign one can use document.getElementById too

user_15059690
Related