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

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 更新为这个新值。

$(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 demo

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; 
     }
 });
});

P.S.：我认为这不能仅使用 jQuery Mask 插件来完成。

Answer 3

给你的文本框一个 ID。

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

JSFiddle

Answer 4

这样怎么样，你钩住按键并检查数字/字母计数器，如果超过你将忽略按键（通过返回 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;
 });
}