input type="number"在Chrome

从MDN的<input>文档

如果类型属性的值是text， email， search， password， tel，或url，此属性指定用户可以输入的最大字符数(以Unicode码位为单位);对于其他控件类型，它将被忽略。

所以在设计上maxlength在<input type="number">上被忽略。

根据你的需要，你可以在他/她的回答中使用min和max属性(注意:这只会定义一个受限的范围，而不是值的实际字符长度，尽管-9999到9999将涵盖所有0-4位数字)，或者你可以使用常规文本输入，并使用新的pattern属性对字段强制验证:

<input type="text" pattern="\d*" maxlength="4">

你可以使用最小值和马克斯属性。

下面的代码做同样的事情:

<input type="number" min="-999" max="9999"/>

我有两种方法

首先:使用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;" />

对于有长度限制的数字输入，您也可以尝试这种方法

<input type="tel" maxlength="4" />

我知道已经有答案了，但如果你想让你的输入行为完全像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();

最大长度-输入类型文本

<input type="email" name="email" maxlength="50">

使用jQuery:

$("input").attr("maxlength", 50)

最大输入类型号

JS

function limit(element, max) {
var max_chars = max;
if(element.value.length > max_chars) {
element.value = element.value.substr(0, max_chars);
}
}

超文本标记语言

<input type="number" name="telefono" onkeydown="limit(this, 20);" onkeyup="limit(this, 20);">

Chrome(技术上，Blink) 不会实现maxlength为<input type="number">。

HTML5规范说maxlength只适用于文本、url、电子邮件、搜索、电话和密码类型。

最大长度将不适用于<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"
/>

根据我的经验，人们问为什么maxlength被忽略的大多数问题是因为允许用户输入超过“允许”的字符数量。

正如其他注释所述，type="number"输入没有maxlength属性，而是有min和max属性。

要让字段限制可以插入的字符数量，同时允许用户在提交表单之前意识到这一点(否则浏览器应该识别值> max)，您必须(至少目前)向该字段添加一个侦听器。

这是我过去使用的解决方案:http://codepen.io/wuori/pen/LNyYBM

这是我的解决方案与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);
});

我希望它能帮助到一些人。

<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;"
/>

快乐编码:)

<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;">

Demo - __abc0

这也适用于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, "");
}

演示:https://codepen.io/aslami/pen/GdPvRY

许多人发布了onKeyDown()事件，它根本就是不工作，即一旦达到限制就不能删除。所以用onKeyPress()代替onKeyDown()，它工作得很好。

下面是工作代码:

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;" />

我最近尝试的绝对解决方案是:

<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" />

我会让这个快速和容易理解!

使用min=''和max=''代替type='number'的maxlength (maxlength意味着定义text类型字符串的最大字母数量)。

干杯

<input type="number">只是…一个数字输入(尽管不能通过Javascript从字符串转换为浮点数)。

我猜，它不会限制字符的maxLength键输入，否则你的用户可能会陷入“键陷阱”，如果他们忘记了一个小数在开始(尝试把.在索引1，当<input type"text">“maxLength”attr已经到达)。然而，如果你设置了max属性，它将在表单提交时验证。

如果您试图限制/验证一个电话号码，请使用type="tel" attr/value。它遵从maxLength attr并只显示移动号码键盘(在现代浏览器中)，您可以将输入限制为一个模式(即pattern="[0-9]{10}")。

对于React用户，

只需将10替换为您的最大长度要求

 <input type="number" onInput={(e) => e.target.value = e.target.value.slice(0, 10)}/>

我可以用这个存档。

<input type="text" onkeydown="javascript: return event.keyCode === 8 || event.keyCode === 46 ? true : !isNaN(Number(event.key))" maxlength="4">

试着用tel:

 maxlength="5" type="tel"

输入类型文本和oninput事件与regex只接受数字为我工作。

<input type="text" maxlength="4" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

input type="number"

这是正确的，参见文档在这里

相反，你可以使用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)">

试试这个,

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />

完成了!只有数字和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');" />

如果你想在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);
}
};

我写了一个小而干净的解决方案。使用这个函数可以使它正常工作

  const inputHandler = (e) => {
const { value, maxLength } = e.target;
if (String(value).length >= maxLength) {
e.preventDefault();
return;
}
};

例如，它可以在React中这样使用:

<input
type="number"
maxlength="4"
onKeyPress={inputHandler}
/>

根据上面的Neha耆那教徒的答案，我只是将下面的代码添加到公共区域

$(':input[type="number"]').on('input', function() {
if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);


});

然后你可以使用maxlength="4"就像文本类型字段。

如何限制输入类型的最大长度

<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>

这段代码对我来说运行得很好。

在带有type="number"的输入中，可以添加以下属性:

oninput="constrainUserInput(this.id)"

完整的输入是这样的:

<input type="number" class="test_css" maxlength="4" oninput="constrainUserInput(this.id)" id="flight_number" name="number"/>

注意:必须为这个方法分配输入和ID

然后你可以将下面的JavaScript添加到你的HTML中，它基本上用一个空引号替换任何超过你的maxlength属性的字符(本质上是删除它们):

function constrainUserInput(id) {
let input = document.getElementById(id);
let value = input.value;
if (value.length > input.maxLength) {
input.value = value.substring(0, input.maxLength);
}
}

下面的代码将允许用户:

1. 只能输入0-999范围内的数字。
2. 这也限制了用户输入不超过3个字符。
3. 当用户输入超过3个字符时，它将清除文本框。

<input type="number" name="test_name" min="0" max="999" oninput="validity.valid||(value='');">

这个代码对我有用

<form method="post">
<label for="myNumber">My Number:</label>
<input type="number" maxlength="9" required
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" >
<br><br>
<input type="submit" value="Submit">
</form>

我有这个问题在django形式。这就是我解题的代码。

HTML

<input type="tel" maxlength="6" oninput="this.value=this.value.replace(/[-]/g,'');"></input> <!-- I needed to remove the "-" sinc tell field accepts it. -->

Django form

class TokenForm(forms.Form):
code = forms.CharField(
required=True,
label="Enter 6 digit confirmation code",
widget=forms.TextInput(
attrs={
"class": "form-control",
"placeholder": "Enter 6 digit code",
"type": "tel",
"maxlength":"6",
"oninput":"this.value=this.value.replace(/[-]/g,'');"
}
),
)

在React上试试吧。

<input
onInput={(e) => {
if (e.target.value.length > e.target.maxLength)
e.target.value = e.target.value.slice(0,e.target.maxLength);
}}
type = "number"
maxlength = {6}
/>