在达到输入最大长度

时间:2015-06-27 00:12:49

标签: jquery html ajax

说明

我有以下代码触发ajax请求以验证来自MySql DB表的类型化促销代码....

输入字段$(#code)的最大长度为 5 个字符

当我在输入字段中键入5个字符(即最大长度)时,会发生ajax调用并且验证过程正常。

问题:

我的问题是,当我在输入这5个字符后继续按任何其他键时,ajax调用会在每次按键时继续触发...这是不正确的。

是否有任何方法可以通过更改输入值来限制keyup函数?

我换句话说,只有当用户键入5个五个字符时才会触发ajax调用,除非他更改了输入值,否则再也不会再调用它

    <script>
    $(document).ready(function() {  

        //the min chars for promo-code
        var min_chars = 5;  

        //result texts  
        var checking_html = 'Checking...';  

        //when keyup  
        $('#code').keyup(function(event){ 
            //run the character number check  
            if($('#code').val().length == min_chars){  

                //run the check
                check_code(); 

            }
        });  

    });


    //function to check the promo code  
    function check_code(){  

        //get code  
        var code = $('#code').val();

        //use ajax to run the check 
        $.post("promo_code_php/promo_code_check", { code: code },  
            function(result){  

            //do something ...

            }
        });  
    }

    </script>

HTML输入字段....

<input type="text" id="code" name="code" maxlength="5" placeholder="Promo Code">

2 个答案:

答案 0 :(得分:1)

只需跟踪您已检查的输入。如果代码没有更改,请阻止启动check_code函数。

$(document).ready(function() {  

    //the min chars for promo-code
    var min_chars = 5;  
    var checked_input = "";  

    //result texts  
    var checking_html = 'Checking...';  

    //when keyup  
    $('#code').keyup(function(event){ 
        //run the character number check  
        if($('#code').val().length == min_chars && $('#code').val() != checked_input){  

            //run the check
            checked_input = ($('#code').val(); 
            check_code(); 

        }
    });  

});

答案 1 :(得分:0)

上面的内容不止一次......在这里我会怎么做......虽然你的味道可能有点复杂。

在您的HTML中:

<input type="text" id="code" name="code" maxlength="5" data-checked="false" placeholder="Promo Code"/>

在你的jQuery中:

$("#code").keyup(function() {

  if ($("#code").val().length === 5 && !$("#code").data("checked")) {

    $("#code").data("checked") = true;
    check_code();

  }

  if ($("#code").val().length < 5 && $("#code").data("checked")) {

    $("#code").data("checked") = false;

  }


});

此代码保证重新检查是否输入了错误的字符或其他内容。