在未在特定字段中键入X秒后发送表单

时间:2012-07-24 21:23:02

标签: php javascript jquery html

我使用语音到文本软件输入字段,因为没有屏幕或鼠标或键盘,我需要在此字段中没有打字(实际说话)3秒后发送此表单但是字段不应为空

我正在使用PHP,但我想解决方案是JavaScript或jQuery,我不太了解这两个,所以如果你能解释如何使用它我会很感激。

3 个答案:

答案 0 :(得分:5)

从根本上说,您需要捕获按键事件并启动计时器。如果在按下另一个键之前计时器用完,请提交表单

Detecting key pressed with jQuery就是这样完成的:

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

您可以使用setTimeout()方法计算3秒钟(See here

最后,使用jQuery的submit()显示here来提交表单

您可能还希望use focus()在页面加载后将焦点移动到文本输入,以便SR在正确的位置“键入”,

此外,this article是JS中时序事件的一个很好的介绍,包括如何取消它们

简而言之,你需要这样的东西(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>

(由于closures),这些Timeout / DelayInMs vars仍在事件的范围内 顺便提一下,这还有额外的好处,即计时器在第一次按键之后才会启动 - 所以只要您愿意开始说话,就可以开始使用。

答案 1 :(得分:4)

$(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

更新:

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.

所以如果你使用keyup而不是keypress会更好,那么你的计时器清除适用于任何键。

答案 2 :(得分:0)

我认为你可以使用http://narf.pl/jquery-typing/jquery.typing-0.2.0.min.js

查看http://narf.pl/jquery-typing/

$(':text').typing({
    start: function (event, $elem) {
       // do nothing
    },
    stop: function (event, $elem) {
       // send your form
    },
    delay: 3000
});

希望这可以提供帮助