Question

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

目前有效：

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

但是你可以看到它在激活表格之前需要2个字符。

我需要它能够发射1,2或3个字符（所以像数量4，数量56，数量657）。所以我想它需要“等待”几毫秒来“看”是否按下了另一个键，然后再次等待，看看是否按下了第三个键。

任何人都可以帮忙吗？

Answer 1

示例DEMO

我想这就是你需要的东西

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

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

});

希望这有帮助，谢谢

Answer 2

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

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

});

您可以使用this answer中的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(); 
        }
    });  
})

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

Answer 3

此类功能需要jquery.typing-0.2.0.min.js。在这里下载：

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

享受!!! ：）

Answer 4

我认为您只需将条件更改为＆＃34; $（this）.val（）。length＆lt; 3＆＃34;

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

Answer 5

这将允许甚至使用退格键来删除键入的输入，但是如果想要取消一个输入而不是使用另一个输入（需要更多逻辑）则不适合。在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>

Jquery在带有字符数的密钥上提交表单

5 个答案:

示例DEMO