I have an <input type="text">, and I need to call a function after the text in the text box was changed (inluding actions performed during jQuery's keydown and keypress handlers).
If I call my function from the jQuery handler, I see the value (e.target.value) as it was before the input was added. As I don't want to manually add the input onto the value every time, how I can call my function and have it use the updated value?
If I understand you right then something like this is the way u can do it
$('input').bind('change keydown keyup',function (){
/// do your thing here.
// use $(this).val() instead e.target.value
});
Updated: 03/05/13
Please note: that you are better off to use .on() as oppose to .bind()
As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate().
For more information jQuery Bind
You can use keyup - so you are only calling it once the key has been released:
$("#idofinputfield").keyup(function() {
youFunction($(this).val());
});
You can generate the future value by taking the position where the new character will be inserted:
$('input').bind('keypress',function (){
var value = e.target.value,
idx = e.target.selectionStart,
key = e.key;
value = value.slice(0, idx) + key + value.slice(idx + Math.abs(0));
return yourfunction(value);
});