[英]input field: limit the number of letters and numbers typed
Is there a way to limit the number of letters and numbers allowed to type in to an input field? 有没有办法限制允许输入到输入字段的字母和数字的数量? I would like to only allow 3 letters and 2 numbers to be typed in, in whatever order. 我想只允许输入3个字母和2个数字,无论顺序如何。
Is this possible using the jQuery Mask Plugin ? 这可能使用jQuery Mask Plugin吗? Or not? 或不?
See my jsFiddle here: http://jsfiddle.net/0akoL2x2/ 在这里查看我的jsFiddle: http : //jsfiddle.net/0akoL2x2/
html: HTML:
<input type="text" class="preview" size="30" placeholder="Preview text" class="text-input" maxlength="5" autofocus />
jquery: jQuery的:
jQuery('.personalisation').mask("XXXZZ", {
translation: {
'X': {pattern: /[A-Za-z0-9]/},
'Z': {pattern: /[A-Za-z0-9]/},
}
How about using a data attribute? 如何使用数据属性? Let's call it data-temp
: 我们称之为data-temp
:
<input type="text" class="alnum" maxlength="5" data-temp="">
Use $(document).on('input'...
to monitor all changes (even dynamic elements), and revert back immediately if the new value exceeds the maximum. Otherwise, let it happen, and update data-temp
to this new value. 使用$(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);
});
Here is a fiddle that works: http://jsfiddle.net/igorshmigor/k2ss62gg/3/ 这是一个有效的小提琴: http : //jsfiddle.net/igorshmigor/k2ss62gg/3/
The JS code looks like this: 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: I don't think this can be done with just the jQuery Mask Plugin. PS:我不认为只用jQuery Mask Plugin就可以做到这一点。
How about this, you hook the keypress and check the number/letter counters and if it exceeds you will just ignore the keypress (by returning false) 怎么样,你勾住按键并检查数字/字母计数器,如果它超过你就会忽略按键(通过返回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;
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.