0

我有一个表格，其中包含网格大小/颜色中的大量 INPUT 字段。我希望每次在输入字段中输入数字时提交表单 - 因为它会动态计算价格。

目前这有效：

$('.myval').bind('keyup', function() { 
    if($(this).val().length >= 2) {
        $('#cart').submit(); 
    }
});

但正如您所见，在触发表单之前它需要 2 个字符。

我需要它能够触发 1,2 或 3 个字符（例如 Qty 4、qty 56、qty 657）。所以我想它需要“等待”几毫秒才能“查看”是否按下了另一个键，然后再次等待查看是否按下了第三个键。

有人能帮忙吗？

4

5 回答 5

2

示例演示

我想这就是你需要的

您可以增加或减少等待时间

var t;
$('.myval').keyup(function () {
    clearTimeout(t);
    if ($(this).val().length < 2) {
        t = setTimeout(function () {
            $('#cart').submit();
        }, 1000);
    } else {
        $('#cart').submit();
    }

});

希望这有帮助，谢谢

于 2013-10-31T18:55:05.307 回答
1

我认为您只需将条件更改为 "$(this).val().length < 3"

  $('.myval').bind('keyup', function() { 
    if($(this).val().length < 3) {
        $('#cart').submit(); 
      }
  });
于 2013-10-31T17:46:10.717 回答
1

首先，您可以使用 jQuery 的速记方法来绑定您的keyup事件。

$('.myval').keyup(function () {

});

您可以使用此答案delay()中的功能。

var delay = (function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

总结一下，使用keyup事件和delay()方法来获得你想要的结果。

$('.myval').keyup(function () {
    delay(function () {
        if($(this).val().length >= 2) {
            $('#cart').submit(); 
        }
    });  
})

免责声明：我没有测试过这个。可能需要进行一些调整。不包括电池。

于 2013-10-31T17:43:45.440 回答
1

您需要jquery.typing-0.2.0.min.js这种类型的功能。在这里下载：

http://lab.narf.pl/jquery-typing/

享受！！！:)

于 2013-10-31T17:45:09.737 回答
0

这甚至允许使用退格键删除键入的输入，但如果要取消一个输入并使用另一个输入（需要更多逻辑），则不适合。在 Firefox 25.0 / Linux 上测试：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script type="text/javascript">
        var lenTemp1 = 0;
        var delay_ms = 1000;

        function testSubmit(inputElemId) {
            var actualLen = $("#" + inputElemId).val().length;
            if (actualLen && (actualLen == lenTemp1))
                $('#cart').submit();
            else {
                lenTemp1 = actualLen;
                window.setTimeout("testSubmit('" + inputElemId + "')", delay_ms);
            }
        }

        function initialKeyup() {
            lenTemp1 = $(this).val().length;
            $('.myval1').unbind('keyup', initialKeyup);
            window.setTimeout("testSubmit('myval1')", delay_ms);
        }

        $(document).ready(function() {
            $('.myval1').bind('keyup', initialKeyup);
        });
    </script>
</head>
<body>
    <form id="cart" method="GET" action="#" onsubmit="alert('debug info: submitted')">
        <input id="myval1" class="myval1" type="text" />
    </form>
</body>
</html>
于 2013-10-31T18:41:42.457 回答