输入字段：限制键入的字母和数字的数量

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