HTML限制输入个数,如何使用CSS(或jQuery,如果需要)限制输入HTML输入的字符数？

jsFiddle

首先,设置maxlength,如：< input type =“text”id =“txtbxSSNOrITIN”maxlength =“5”>

$(document).on("change",function () {

var ckd = this.checked; // ckd is now a boolean

$('[id$=txtbxSSNOrITIN]')

.attr("maxlength",ckd? 2 : 5) // 2 characters if checked,else 5

.css({

background: ckd? '#ffff00' : "green",// yellow if checked,else green

width: ckd? 24 : 144 // 24px if checked,else 144

});

});

上面还有一个较小的问题,那就是如果：用户最初输入超过5个字符,如果你点击复选框,值长度仍然是5！因此,您需要一个额外的条带,以删除不需要的字符,如：

$(document).on("change",function () {

var ckd = this.checked;

$('[id$=txtbxSSNOrITIN]').attr("maxlength",ckd? 2 : 5).css({

background: ckd? '#ffff00' : "green",width: ckd? 24 : 144

}).val(function(i,v){

// If checked,slice value to two characters:

return ckd && v.length>2 ? v.slice(0,2) : v;

});

});

如果你想使用你构建的代码去专业,你可能还想要

防止用户感到愚蠢

通过存储最后一个(长一个)类型的值.如果用户单击复选框而不是意识到“那么……那是愚蠢的”,再次勾选它应该返回旧的值：

$(document).on("change",function () {

var ckd = this.checked;

var $input = $('[id$=txtbxSSNOrITIN]');

if(ckd) $input.data("oldValue",$input.val() ); // Remember the current value

$input.prop("maxlength",ckd? 2 : 5).css({

background: ckd? '#ffff00' : "green",v){

// If checked,slice value to two characters:

return ckd && v.length>2 ? v.slice(0,2) : $input.data("oldValue");

});

});