Send form after X seconds of not typing in specific field

Question

I am using a Speech-to-Text software to type in a field, since there is no screen or mouse or keyboard, I need to send this form after 3 seconds of no typing (actually talking) in this field but the field shouldn't be empty

I am using PHP but I guess the solution is JavaScript or jQuery, I dont know much in these two so I'd appreciate if you could explain how to use it too.

Answer 1

Fundamentally, you need to capture the keypress event and start a timer. If the timer runs out before another key is pressed, submit the form

Detecting key pressed with jQuery is done like this:

$('#ElementId').keypress(function() {
    /* Your code */
});

You can use the setTimeout() method to time 3 seconds (See here)

and finally, use jQuery's submit() as shown here to submit the form

You may also want to use focus() to move the focus to the text input once the page has loaded so that SR is "typing" in the right place,

Additionally, this article is a good intro to timing events in JS, including how to cancel them

In short, you want something like this (tested):

$(document).ready(function(){

    var Timeout; //For reference to timeout
    var DelayInMs=3000;
    $("#SRInput").focus(); //Give focus to input on document ready

    //When input is received, (re)set the timer
    $("#SRInput").keypress(function() {
        if(Timeout) {clearTimeout(Timeout);} //Clear existing timeout, if any
        Timeout = setTimeout(function(){$("#SRForm").submit();}, DelayInMs);
    });

});

<form id="SRForm" method = ... >
    <input type="text" name="SRInput" id="SRInput"/>
</form>

(These Timeout/DelayInMs vars are still in scope for the events thanks to closures) Incidentally, this has the added bonus that the timer isn't started until after the first keypress - so you can take as long as you like to start talking).

Answer 2

$(function() {
    var time = 0;
    $("textarea").keyup(function() {
        time = 0;
    });

    var int = self.setInterval(function() {
        var s = $("textarea").val();
        if (time++ == 3) {
            if (s != "") alert(s);
            time = 0;
        }
    }, 1000);
});​

DEMO

UPDATE:

As @Tim Down has said,

The keypress event is designed for handling the a character typed by the user 
rather than detecting keyboard activity and the delete and backspace keys 
do not generate characters. Some browsers blur this line somewhat but 
the general principle is that the keyup and keydown events are there to detect 
any key being pressed and telling you about which key it is while keypress is 
for detecting an actual character being typed.

So that would be better if you use keyup instead of keypress, then your timer clear works for any key.