如何在HTML5中设置max-length "input type=number"元素?

你可以指定min和max属性，这将只允许在特定范围内输入。

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

然而，这只适用于旋转控制按钮。尽管用户可以输入一个比允许的max更大的数字，但表单将不会提交。

^{截图来自Chrome 15}

你可以在JavaScript中使用HTML5 oninput事件来限制字符的数量:

myInput.oninput = function () {
if (this.value.length > 4) {
this.value = this.value.slice(0,4);
}
}

更相关的属性是min和max。

与type="number"一样，你指定了一个max而不是maxlength属性，这是可能的最大数目。所以有4个数字，max应该是9999, 5个数字99999等等。

另外，如果你想确保它是一个正数，你可以设置min="0"，确保是正数。

你可以添加一个max属性，它将指定你可以插入的最大数字

<input type="number" max="999" />

如果你同时添加max和min值，你可以指定允许值的范围:

<input type="number" min="1" max="999" />

上面的不仍然会阻止用户手动输入指定范围之外的值。相反，他会看到一个弹出窗口，告诉他在提交表单时输入一个范围内的值，如下面的截图所示:

你可以像这样把所有这些组合起来:

<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />


<script>
// This is an old version, for a more recent version look at
// https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
function maxLengthCheck(object)
{
if (object.value.length > object.maxLength)
object.value = object.value.slice(0, object.maxLength)
}
</script>

< b >解决方案:
有关示例，请参见这或这。

演示 -在这里查看完整版本的代码 http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/ < / p > 下面是更新代码: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/ < / p >

< b >更新3: 请注意，允许输入超过一个小数点可能会导致数值混乱

如果你正在寻找一个移动网络解决方案，你希望你的用户看到一个数字板，而不是一个全文键盘。使用类型=“电话”。它将与maxlength一起工作，这将节省您创建额外的javascript。

Max和Min仍然允许用户输入超过Max和Min的数字，这不是最佳的。

它非常简单，用一些javascript你可以模拟maxlength，看看:

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />

下面的代码停在2，但允许继续编辑;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

或者如果你的最大值是99，最小值是0，你可以把它加到输入元素中(你的值会被你的最大值重写)。

<input type="number" min="0" max="99"
onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

然后(如果你想)，你可以检查输入的是否真的数字

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

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

我以前遇到过这个问题，我使用html5数字类型和jQuery的组合解决了它。

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

脚本:

$("input[name='minutes']").on('keyup keypress blur change', function(e) {
//return false if not 0-9
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}else{
//limit length but allow backspace so that you can still delete the numbers.
if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
return false;
}
}
});

正如其他人所说，min/max与maxlength不同，因为人们仍然可以输入一个比您想要的最大字符串长度更大的浮点数。为了真正模拟maxlength属性，你可以在紧要关头做这样的事情(这相当于maxlength="16"):

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">

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

你可以将它指定为文本，但要添加只匹配数字的pettern:

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

它非常完美，而且在移动设备上(在iOS 8和Android上进行了测试)，数字键盘也会弹出。

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

//For Angular I have attached following snippet.

<div ng-app="">
<form>
Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0">
</form>
<h1>You entered: \{\{number}}</h1>
</div>

如果你使用"onkeypress"事件，那么你在开发(单元测试)时将不会受到任何用户限制。如果你有要求，不允许用户进入特定的限制后，看看这段代码，并尝试一次。

因为我发现你不能使用任何onkeydown， onkeypress或onkeyup事件的完整解决方案，包括移动浏览器。顺便说一下，onkeypress已弃用，并且不再出现在android的chrome /歌剧中(参见:UI事件 W3C工作草案，2016年8月04日).

function checkMaxLength(event) {
// Prepare to restore the previous value.
if (this.oldValue === undefined) {
this.oldValue = this.defaultValue;
}


if (this.value.length > this.maxLength) {
// Set back to the previous value.
this.value = oldVal;
}
else {
// Store the previous value.
this.oldValue = this.value;
		

// Make additional checks for +/- or ./, etc.
// Also consider to combine 'maxlength'
// with 'min' and 'max' to prevent wrong submits.
}
}

我还建议将maxlength与min和max结合起来，以防止如上所述的错误提交。

另一种选择是为任何具有maxlength属性的东西添加一个侦听器，并将切片值添加到其中。假设用户不想在与输入相关的每个事件中使用函数。下面是一个代码片段。忽略CSS和HTML代码，JavaScript才是最重要的。

// Reusable Function to Enforce MaxLength
function enforce_maxlength(event) {
var t = event.target;
if (t.hasAttribute('maxlength')) {
t.value = t.value.slice(0, t.getAttribute('maxlength'));
}
}


// Global Listener for anything with an maxlength attribute.
// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);

label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }

<label for="test_input">Text Input</label>
<input id="test_input" type="text" maxlength="5"/>
<span>set to 5 maxlength</span>


<br>


<label for="test_input">Number Input</label>
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>
<span>set to 2 maxlength, min 0 and max 99</span>

HTML输入

 <input class="minutesInput" type="number" min="10" max="120" value="" />

jQuery

 $(".minutesInput").on('keyup keypress blur change', function(e) {


if($(this).val() > 120){
$(this).val('120');
return false;
}


});

设置数字输入的maxlength的一个简单方法是:

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

啊。就像有人在实施过程中半途而废，以为没人会注意到。

不管出于什么原因，上面的答案没有使用min和max属性。这个jQuery完成它:

    $('input[type="number"]').on('input change keyup paste', function () {
if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
});

如果你是那种“jQuery-is-the-devil”类型，它也可能作为一个命名函数“oninput”使用jQuery。

<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

或者如果你想什么都不能输入

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />

假设您希望允许的最大值为1000—可以是键入的，也可以是使用旋转器的。

<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">