JQuery Text Change Event

Question

I need to fire an event at any time when the contents of the text field has changed.

I cannot use keyup and cannot use keypress .

Keyup and keydown do not work if you hold down the key.

Keyboard triggers before changing text. It also does not recognize backspace or delete.

So now I assume that I will need to create some kind of custom logic or load a plugin. Are there any plugins there? Or, if I have to build one, what limitations should I look for?

For example, Facebook does this with their search at the top. You can press and hold.

another example is the recording of a stack question. Right under the editor, the content is copied in real time, backspace and everythng works. How do they do it?

Answer 1

I just looked at the SO source. It looks like they are doing something like this :

function updatePreview(){ $('div').text($('textarea').val()); } $('textarea').bind('keypress', function(){ setTimeout(updatePreview, 1); } );​ 

They do some extra things so that the HTML tags are in bold, italics and links, etc., and they time it out. They increase the delay from 1 to longer if it takes too much time to create the HTML code.

Answer 2

I had success using jQuery (in Chrome). If you hold the key down, it takes into account each change, not just the first, and it treats non-printable keys as a backspace.

HTML

 <input id="txt" type="text" /> <span id="changeCount">0</span> 

Javascript

 $('#txt').keydown(function(event) { // Don't count the keys which don't actually change // the text. The four below are the arrow keys, but // there are more that I omitted for brevity. if (event.which != 37 && event.which != 38 && event.which != 39 && event.which != 40) { // Replace the two lines below with whatever you want to // do when the text changes. var count = parseInt($('#changeCount').text(), 10) + 1; $('#changeCount').text(count); } }); 

As I said above, you will want to filter out all key codes that do not change the text, for example ctrl , shift , alt , enter , etc. In addition, the boundary condition is if you press the backspace or delete key when the text field is empty or if the text field has the maximum length and the key is pressed for printing, but this is also not difficult to handle.

Here is a working jsfiddle example .

Answer 3

How about a survey? Make setInterval and call a function that checks the text every 500 ms? In any case, you do not want to determine the content change on each key, because in some older browser / older computer it is slow, and you will notice a delay between text input and text display.

Answer 4

You need a function like an observer.

He resorts to polling setInterval if other functions are not available: http://james.padolsey.com/javascript/monitoring-dom-properties/

Answer 5

I have a simple solution that we happily use in one of our projects.

you can try @ http://jsfiddle.net/zSFdp/17/

 var i = 0; $('#text').bind('check_changed', function(){ var t = $(this); // do something after certain interval, for better performance delayRun('my_text', function(){ var pv = t.data('prev_val'); // if previous value is undefined or not equals to the current value then blablabla if(pv == undefined || pv != t.val()){ $('#count').html(++i); t.data('prev_val', t.val()); } }, 1000); }) // if the textbox is changed via typing .keydown(function(){$(this).trigger('check_changed')}) // if the textbox is changed via 'paste' action from mouse context menu .bind('paste', function(){$(this).trigger('check_changed')}); // clicking the flush button can force all pending functions to be run immediately // eg, if you want to submit the form, all delayed functions or validations should be called before submitting. // delayRun.flush() is the method for this purpose $('#flush').click(function(){ delayRun.flush(); }); 

DelayRun () function

 ;(function(g){ var delayRuns = {}; var allFuncs = {}; g.delayRun = function(id, func, delay){ if(delay == undefined) delay = 200; if(delayRuns[id] != null){ clearTimeout(delayRuns[id]); delete delayRuns[id]; delete allFuncs[id]; } allFuncs[id] = func; delayRuns[id] = setTimeout(function(){ func(); delete allFuncs[id]; delete delayRuns[id]; }, delay); }; g.delayRun.flush = function(){ for(var i in delayRuns){ if(delayRuns.hasOwnProperty(i)){ clearTimeout(delayRuns[i]); allFuncs[i](); delete delayRuns[i]; delete allFuncs[i]; } } }; })(window); 

Answer 6

Zurb has a great plugin that may be useful to you http://www.zurb.com/playground/jquery-text-change-custom-event