Run javascript on text change

Question

What I am looking for is slightly subjective, but I am sure there is a better way to do this.

I am looking for a better way to perform javascript while a user is typing content into either a textarea or input box on a website. For instance, sites such as Google Docs are capable of saving changes to documents almost instantly without noticeable performance degradation. Many sites however use a bit of jQuery that might look like the following:

$("#element").on("keyup", function() { /* Do something */ });

This works fine for simple things like autocomplete in search boxes, but performance becomes a nightmare once you have any sizable corpus for it to have to deal with (or if a user types fast, yikes).

In trying to find a better way to analyze/save/what-have-you text as the user is typing, I started to do something like this:

var changed = false;
$("#element").on("keyup", function() { changed = true });
setInterval(function() { if(changed) { /* Do something */ changed = false; } }, 1000);

It seems to alleviate laggy or delayed text input, but to me it seems like a less than elegant solution.

So back to my question, is there a better way to have javascript execute when a corpus has been changed? Is there a solution outside of using intervals?

Thanks.

Maybe [this topic](http://stackoverflow.com/questions/4220126/run-javascript-function-when-user-finishes-typing-instead-of-on-key-up) could be useful — omma2289, Oct 21 '13 at 05:55

score 2 · Accepted Answer · answered Oct 21 '13 at 05:57

There is a jQuery plugin that does pretty much what you did. Your example will be transformed into

$("#element").on("keyup", $.debounce(1000, function() { /* Do something */ }));

The code will execute after a user is not pressing any keys for 1000ms.

score 1 · Answer 2 · answered Oct 21 '13 at 06:17

I have found a very good solution for this. This code will check whether the content has been changed and based on that it will save it otherwise the save functionality will not be executed !

Check out this demo JSFIDDLE

Here is the code :

HTML :

Content:<br>
<br>
(type some text into the textarea and it will get saved automatically)
<textarea rows="5" cols="25" id="content"></textarea>
<br>
<span id="sp_msg_saved" style="background-color:yellow; display:none">Content is saved as draft !</span>

JS:

var old_content = "";
function save_content()
{
    var current_content = $('#content').val();
    //check if content has been updated or not
    if(current_content != old_content)
    {
        alert('content is updated ! Save via ajax');
        old_content = current_content;
        $('#sp_msg_saved').show(100);
        $('#sp_msg_saved').fadeOut(3000);
    }
}
setInterval(save_content,3000);

You can increase or decrease the amount of time for the save function to call by altering the values in setInterval function. Put the code for saving the content via ajax, that will save the current user content into your DB, I haven't included that one...

score 1 · Answer 3 · answered Oct 21 '13 at 07:11

You can make your own little delay by using the window.setTimeout-Function:

var IntervalId = null;

function saveEdits(){
    //Doing your savings...
}

$('input').keyup(function(){
    if (IntervalId){
        window.clearTimeout(IntervalId);
        IntervalId = null;
    }

    IntervalId = window.setTimeout(function(){
        saveEdits();
    }, 3000);
});

Run javascript on text change

3 Answers3