该maxlength属性不适用于<input type="number">。这只发生在 Chrome 中。
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>
问问题
606212 次
30 回答
414
如果type属性的值为
text,search,password,tel, 或url，则此属性指定用户可以输入的最大字符数（以 Unicode 代码点表示）；对于其他控件类型，它被忽略。
所以在设计maxlength上被忽略<input type="number">了。
根据您的需要，您可以使用他/她的答案中建议的andmin属性max（注意：这只会定义一个受限制的范围，而不是值的实际字符长度，尽管 -9999 到 9999 将涵盖所有 0-4 digit numbers），或者您可以使用常规文本输入并使用新属性对字段强制验证：pattern
<input type="text" pattern="\d*" maxlength="4">
于 2013-08-29T12:23:16.590 回答
328
最大长度不适用于<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"
/>
于 2016-01-06T19:23:52.847 回答
92
许多人发布了根本不起作用onKeyDown()的事件，即一旦达到限制就无法删除。所以不要使用它，它工作得很好。onKeyDown()onKeyPress()
以下是工作代码：
User will not be allowed to enter more than 4 digits
<br>
<input type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==4) return false;" />于 2018-05-21T05:12:32.797 回答
50
我有两种方法可以让你做到这一点
第一：使用type="tel"，它将像type="number"在移动设备中一样工作，并接受 maxlength：
<input type="tel" />
第二：使用一点 JavaScript：
<!-- maxlength="2" -->
<input type="tel" onKeyDown="if(this.value.length==2 && event.keyCode!=8) return false;" />
于 2014-05-09T02:26:30.853 回答
37
您可以使用min和max属性。
下面的代码做同样的事情：
<input type="number" min="-999" max="9999"/>于 2013-08-29T12:42:41.973 回答
23
这也适用于Android
将输入类型更改为文本并使用“oninput”事件调用函数：
<input type="text" oninput="numberOnly(this.id);" maxlength="4" id="flight_number" name="number"/>
现在使用 Javascript Regex 过滤用户输入并将其限制为仅数字：
function numberOnly(id) {
// Get element by id which passed as parameter within HTML element event
var element = document.getElementById(id);
// This removes any other character but numbers as entered by user
element.value = element.value.replace(/[^0-9]/gi, "");
}
于 2018-05-18T20:45:39.577 回答
11
对于 React 用户，
只需将 10 替换为您的最大长度要求
<input type="number" onInput={(e) => e.target.value = e.target.value.slice(0, 10)}/>
于 2020-05-01T15:46:44.743 回答
10
我曾经遇到过同样的问题，并根据我的需求找到了这个解决方案。它可能会帮助一些人。
<input type="number" placeholder="Enter 4 Digits" max="9999" min="0"
onKeyDown="if(this.value.length==4 && event.keyCode>47 && event.keyCode < 58)return false;"
/>
快乐编码:)
于 2017-07-08T21:03:05.350 回答
9
如何限制输入类型的最大长度
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
于 2021-07-17T10:12:49.253 回答
8
您也可以尝试对具有长度限制的数字输入进行此操作
<input type="tel" maxlength="4" />
于 2014-11-10T07:37:47.530 回答
8
尝试使用电话：
maxlength="5" type="tel"
于 2020-08-03T09:26:41.253 回答
6
这是我使用 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);
});
我希望它可以帮助某人。
于 2016-08-22T11:09:36.597 回答
6
我写了一个小而干净的解决方法。使用此功能将使其正常工作
const inputHandler = (e) => {
const { value, maxLength } = e.target;
if (String(value).length >= maxLength) {
e.preventDefault();
return;
}
};
例如，它可以像这样在 React 中使用：
<input
type="number"
maxlength="4"
onKeyPress={inputHandler}
/>
于 2021-03-09T23:26:40.167 回答
5
<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
于 2017-12-27T13:15:21.767 回答
4
如果您想在React 函数组件中执行此操作或不使用"this"，这是一种方法。
<input onInput={handleOnInput}/>
const handleOnInput = (e) => {
let maxNum = 4;
if (e.target.value.length > maxNum) {
e.target.value = e.target.value.slice(0, maxNum);
}
};
于 2021-01-02T16:28:34.333 回答
4
输入类型文本和使用正则表达式的 oninput 事件只接受对我有用的数字。
<input type="text" maxlength="4" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>
于 2020-08-25T16:11:43.560 回答
4
根据我的经验，人们询问为什么maxlength被忽略的大多数问题是因为允许用户输入超过“允许”数量的字符。
正如其他评论所述，type="number"输入没有maxlength属性，而是具有minandmax属性。
要让字段限制可以插入的字符数，同时允许用户在提交表单之前知道这一点（浏览器应该识别 value > max 否则），您必须（至少现在）添加一个场的听众。
这是我过去使用过的解决方案：http: //codepen.io/wuori/pen/LNyYBM
于 2016-03-22T15:59:19.123 回答
4
尝试这个，
<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />
于 2020-10-21T05:08:58.270 回答
4
输入类型 =“数字”的最大长度被忽略
没错，请参阅此处的文档
相反，您可以使用type="text"和使用 javascript 函数来仅允许数字。
尝试这个：
function onlyNumber(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)){
return false;
}
return true;
}<input type="text" maxlength="4" onkeypress="return onlyNumber(event)">于 2020-09-19T06:17:29.663 回答
3
我知道已经有了答案，但是如果您希望输入的行为与maxlength属性完全相同或尽可能接近，请使用以下代码：
(function($) {
methods = {
/*
* addMax will take the applied element and add a javascript behavior
* that will set the max length
*/
addMax: function() {
// set variables
var
maxlAttr = $(this).attr("maxlength"),
maxAttR = $(this).attr("max"),
x = 0,
max = "";
// If the element has maxlength apply the code.
if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {
// create a max equivelant
if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
while (x < maxlAttr) {
max += "9";
x++;
}
maxAttR = max;
}
// Permissible Keys that can be used while the input has reached maxlength
var keys = [
8, // backspace
9, // tab
13, // enter
46, // delete
37, 39, 38, 40 // arrow keys<^>v
]
// Apply changes to element
$(this)
.attr("max", maxAttR) //add existing max or new max
.keydown(function(event) {
// restrict key press on length reached unless key being used is in keys array or there is highlighted text
if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
});;
}
},
/*
* isTextSelected returns true if there is a selection on the page.
* This is so that if the user selects text and then presses a number
* it will behave as normal by replacing the selection with the value
* of the key pressed.
*/
isTextSelected: function() {
// set text variable
text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return (text.length > 0);
}
};
$.maxlengthNumber = function(){
// Get all number inputs that have maxlength
methods.addMax.call($("input[type=number]"));
}
})($)
// Apply it:
$.maxlengthNumber();
于 2015-03-19T20:02:14.520 回答
3
完毕！仅数字和 maxlength 完美。
<input maxlength="5" data-rule-maxlength="5" style="height:30px;width: 786px;" type="number" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength); this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
于 2020-11-05T12:35:48.420 回答
2
根据上面Neha Jain 的回答，我只是将以下代码添加到公共区域
$(':input[type="number"]').on('input', function() {
if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);
});
那么您可以使用 maxlength="4" 之类的文本类型字段。
于 2021-06-21T07:49:10.447 回答
2
下面的代码将允许用户：
- 仅输入 0-999 范围内的数字。
- 这也限制了用户不能输入超过 3 个字符。
- 当用户输入超过 3 个字符时，它将清除文本框。
<input type="number" name="test_name" min="0" max="999" oninput="validity.valid||(value='');">
于 2021-09-16T10:47:20.457 回答
2
我最近尝试的绝对解决方案是：
<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" />
于 2018-10-16T12:19:50.473 回答
1
这段代码对我来说效果很好。
在带有 的输入中type="number"，您可以添加以下属性：
oninput="constrainUserInput(this.id)"
完整的输入将如下所示：
<input type="number" class="test_css" maxlength="4" oninput="constrainUserInput(this.id)" id="flight_number" name="number"/>
注意：您必须分配输入和 ID 才能使此方法起作用
maxlength然后，您可以将以下 JavaScript 添加到您的 HTML 中，它基本上用空引号替换任何超出您的属性的字符（基本上是删除它们）：
function constrainUserInput(id) {
let input = document.getElementById(id);
let value = input.value;
if (value.length > input.maxLength) {
input.value = value.substring(0, input.maxLength);
}
}
于 2021-07-29T19:26:20.010 回答
1
<input type="number">就是这样......一个数字输入（虽然，未从字符串转换为通过Javascript浮动）。
我的猜测，它不会限制键输入的字符，maxLength否则如果用户在开头忘记了小数点，则他们可能会陷入“键陷阱”（当已经达到“maxLength”属性时，请尝试将 a .at index ）。但是，如果您设置属性，它将在表单提交时验证。1<input type"text">max
如果您尝试限制/验证电话号码，请使用type="tel"attr/value。它遵循maxLengthattr 并仅调出手机号码键盘（在现代浏览器中），您可以将输入限制为模式（即pattern="[0-9]{10}"）。
于 2020-02-18T03:36:39.700 回答
0
我可以使用它存档它。
<input type="text" onkeydown="javascript: return event.keyCode === 8 || event.keyCode === 46 ? true : !isNaN(Number(event.key))" maxlength="4">
于 2020-07-06T12:49:14.703 回答
0
我会让这个简单易懂！
而不是 maxlength for type='number'（maxlength 旨在定义text类型中字符串的最大字母数量），使用min=''and max=''。
干杯
于 2019-04-23T09:24:20.943 回答
-2
maxlenght - 输入类型文本
<input type="email" name="email" maxlength="50">
使用 jQuery：
$("input").attr("maxlength", 50)
maxlenght - 输入类型号
JS
function limit(element, max) {
var max_chars = max;
if(element.value.length > max_chars) {
element.value = element.value.substr(0, max_chars);
}
}
HTML
<input type="number" name="telefono" onkeydown="limit(this, 20);" onkeyup="limit(this, 20);">
于 2015-07-17T13:06:44.553 回答