maxlength属性对<input type="number">不起作用。这只发生在Chrome。
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>
maxlength属性对<input type="number">不起作用。这只发生在Chrome。
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>
当前回答
<input type=“number” min=“1” onKeyPress=“if(this.value.length==5) 返回 false”/>
使用类型数字与min和处理max与onKeyPress
<input type="number" min="1" onKeyPress="if(this.value.length==5) return false"/>
其他回答
这是我的解决方案与jQuery… 您必须将maxlength添加到输入type=number
$('body').on('keypress', 'input[type=number][maxlength]', function(event){
var key = event.keyCode || event.charCode;
var charcodestring = String.fromCharCode(event.which);
var txtVal = $(this).val();
var maxlength = $(this).attr('maxlength');
var regex = new RegExp('^[0-9]+$');
// 8 = backspace 46 = Del 13 = Enter 39 = Left 37 = right Tab = 9
if( key == 8 || key == 46 || key == 13 || key == 37 || key == 39 || key == 9 ){
return true;
}
// maxlength allready reached
if(txtVal.length==maxlength){
event.preventDefault();
return false;
}
// pressed key have to be a number
if( !regex.test(charcodestring) ){
event.preventDefault();
return false;
}
return true;
});
并处理复制和粘贴:
$('body').on('paste', 'input[type=number][maxlength]', function(event) {
//catch copy and paste
var ref = $(this);
var regex = new RegExp('^[0-9]+$');
var maxlength = ref.attr('maxlength');
var clipboardData = event.originalEvent.clipboardData.getData('text');
var txtVal = ref.val();//current value
var filteredString = '';
var combined_input = txtVal + clipboardData;//dont forget old data
for (var i = 0; i < combined_input.length; i++) {
if( filteredString.length < maxlength ){
if( regex.test(combined_input[i]) ){
filteredString += combined_input[i];
}
}
}
setTimeout(function(){
ref.val('').val(filteredString)
},100);
});
我希望它能帮助到一些人。
我有两种方法
首先:使用type="tel",它将像mobile中的type="number"一样工作,并接受maxlength:
<input type="tel" />
第二:使用一点JavaScript:
<!-- maxlength="2" -->
<input type="tel" onKeyDown="if(this.value.length==2 && event.keyCode!=8) return false;" />
我最近尝试的绝对解决方案是:
<input class="class-name" placeholder="1234567" name="elementname" type="text" maxlength="4" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />
<input type="number" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">
演示 - JSFIDDLE
最大长度将不能与<input type="number"工作,我知道的最好的方法是使用oninput事件限制最大长度。请看下面的代码。
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>