jQuery：一次阻止多個輸入

Question

我正在編寫一個jQuery代碼，該代碼應使用我在變量中定義的字符來切換輸入字符。 到目前為止，如果您一次只按一個字符，則代碼可以很好地工作。 但是，一旦您一次擊中多個字符，就開始破壞結果。 有什么選項可以使jquery一次只獲取一個字符，或者正確地讀出並轉換多個字符。

多個字符按下得太快或類似地按下的結果將導致變量字符串混合了字符或/和混合了多個輸入中的一些字符。

我已經了解了.prop（）函數來禁用輸入，但是即使我禁用了輸入，也無法阻止將多個字符傳遞到該函數中。

預先謝謝你們，加油

HTML：

  jQuery(document).ready(function(){ String.prototype.removeChar = function(){ var string = ""; for(var i = 0, length = this.length-1; i<length; i++){ string += this.charAt(i); } return string; } var name = "Some Random Name", length, sub = "", event, array=[]; $("form").on("keyup", function(e){ event = e.keyCode; if (e.keyCode === 8){ length = $(".input").val().length; sub = sub.removeChar(); $(".input").val(sub); }else{ length = $(".input").val().length; sub += name.charAt(length-1); $(".input").val(sub); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form>Who should be President?<input type="text" name="president" class="input"></form> 

Answer 1

改變你的

$(".input").val(sub);

至

$(".input").val(name.substring(0, length));

然后將您的條件更改為

if (e.keyCode !== 8){
    length = $(".input").val().length;
    sub += name.charAt(length-1);
    $(".input").val(name.substring(0, length));
}

在這種情況下，如果您單擊“后退”按鈕，則您什么也不做

  jQuery(document).ready(function(){ String.prototype.removeChar = function(){ var string = ""; for(var i = 0, length = this.length-1; i<length; i++){ string += this.charAt(i); } return string; } var name = "Some Random Name", length, sub = "", event, array=[]; $("form").on("keyup", function(e){ event = e.keyCode; if (e.keyCode !== 8){ length = $(".input").val().length; sub += name.charAt(length-1); $(".input").val(name.substring(0, length)); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form>Who should be President?<input type="text" name="president" class="input"></form> 

Answer 2

只需將整個輸入值替換為隨機名稱，然后將值縮短即可

 $("form").on("keyup", function(e){
            event = e.keyCode;
            if (e.keyCode != 8){

                length = $(".input").val().length;
                //sub += name.charAt(length-1);
                $(".input").val(name.substring(0, length));

                }
        });

Answer 3

只是改變

  sub += name.charAt(length-1);

至

sub = name.substring(0, length);

想法是僅獲取用戶鍵入的字符總數，然后使用子字符串函數從name變量中獲取許多字符

 jQuery(document).ready(function(){ String.prototype.removeChar = function(){ var string = ""; for(var i = 0, length = this.length-1; i<length; i++){ string += this.charAt(i); } return string; } var name = "Some Random Name", length, sub = "", event, array=[]; $("form").on("keyup", function(e){ event = e.keyCode; if (e.keyCode === 8){ length = $(".input").val().length; sub = sub.removeChar(); $(".input").val(sub); }else{ length = $(".input").val().length; sub = name.substring(0, length); // this is the change $(".input").val(sub); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form>Who should be President?<input type="text" name="president" class="input"></form>