輸入字段：限制鍵入的字母和數字的數量

Question

有沒有辦法限制允許輸入到輸入字段的字母和數字的數量？ 我想只允許輸入3個字母和2個數字，無論順序如何。

這可能使用jQuery Mask Plugin嗎？ 或不？

在這里查看我的jsFiddle： http ： //jsfiddle.net/0akoL2x2/

HTML：

<input type="text" class="preview" size="30" placeholder="Preview text" class="text-input" maxlength="5" autofocus />

jQuery的：

jQuery('.personalisation').mask("XXXZZ", {
        translation: {
            'X': {pattern: /[A-Za-z0-9]/},
            'Z': {pattern: /[A-Za-z0-9]/},
    }

Answer 1

如何使用數據屬性？ 我們稱之為data-temp ：

<input type="text" class="alnum" maxlength="5" data-temp="">

使用$(document).on('input'...來監視所有更改（甚至是動態元素），如果新值超過最大值，則立即恢復。否則，讓它發生，並將data-temp更新為new值。

$(document).on('input', '.alnum', function(){
    var txt = $(this).val();
    if(
        txt.replace(/[^0-9]/g,"").length > 2 ||
        txt.replace(/[^A-Za-z]/g,"").length > 3 ||
        txt.replace(/[a-zA-Z0-9]/g,"").length != 0
      ){
        $(this).val( $(this).data('temp') );
        return;
    }
    $(this).data('temp', txt);
});

JSFiddle演示

Answer 2

這是一個有效的小提琴： http ： //jsfiddle.net/igorshmigor/k2ss62gg/3/

JS代碼如下所示：

var numberCountLimit = 2;
var letterCountLimit = 3;
$(document).ready(function() {
 $('.preview').keypress(function(key) {
     if (key.charCode == 0){
         return true; 
     }
     var current = $(this).val();
     var filtered = current.replace(/[^a-z0-9]/gmi,'');
     $(this).val(filtered);
     var digits = filtered.replace(/[^0-9]/gmi,'');
     var alpha = filtered.replace(/[^a-z]/gmi,'');
     var digitCount = digits.length;
     var alphaCount = alpha.length;
     var isNumber = false;
     var isAlpha = false;
     if (key.charCode > 47 && key.charCode < 58){
         isNumber = true;
         if (digitCount >= numberCountLimit){
            return false; // too many digits
         }
     }
     if (key.charCode > 64 && key.charCode < 123){
         isAlpha = true;
         if (alphaCount >= letterCountLimit){
            return false; // too many letters
         }
     }
     if (!isAlpha && !isNumber){
         return false; 
     }
 });
});

PS：我不認為只用jQuery Mask Plugin就可以做到這一點。

Answer 3

怎么樣，你勾住按鍵並檢查數字/字母計數器，如果它超過你就會忽略按鍵（通過返回false）

var numberCount = 0;
var numberCountLimit = 2;
var letterCount = 0;
var letterCountLimit = 3;
$(document).ready(function() {
 $('.personalisation').keypress(function(key) {
        var currentText = $(this).val();
        numberCount = 0;
        letterCount = 0;
        for (var i = 0, len = currentText.length; i < len; i++) {
          if(currentText.charCodeAt(i) < 48 || currentText.charCodeAt(i) > 57) {
            //Is number
            if((numberCount+1) > numberCountLimit) {
              return false;
            }
            numberCount++;
          } else {
            //Is letter
            if((letterCount+1) > letterCountLimit) {
              return false;
            }
            letterCount++;
          }
        }

     return true;
 });
}

Answer 4

為您的文本框添加ID。

$("#box").mask('XXXZZ', {'translation': {
         X: {pattern: /[A-Za-z0-9]/}, 
         Z: {pattern: /[A-Za-z0-9]/}                                       
     }
});

的jsfiddle