Answers:
您还可以添加一个max
属性,该属性将指定您可以插入的最大数字
<input type="number" max="999" />
如果同时添加max
和min
,则可以指定允许值的范围:
<input type="number" min="1" max="999" />
以上内容仍不会阻止用户手动输入超出指定范围的值。相反,他将显示一个弹出窗口,告诉他在提交表单时输入此范围内的值,如以下屏幕快照所示:
您可以指定min
和max
属性,这将仅允许在特定范围内输入。
<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">
但是,这仅适用于微调器控制按钮。尽管用户可以输入比允许的数字大的数字max
,但表单不会提交。
屏幕快照取自Chrome 15
您可以oninput
在JavaScript中使用HTML5 事件来限制字符数:
myInput.oninput = function () {
if (this.value.length > 4) {
this.value = this.value.slice(0,4);
}
}
maxlength
.............
如果要在Mobile Web解决方案中希望用户看到数字键盘,而不是全文键盘。使用type =“ tel”。它将与maxlength一起使用,可避免创建额外的javascript。
最大值和最小值仍将允许用户输入超出最大值和最小值的数字,这不是最佳选择。
您可以像这样组合所有这些:
<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>
更新:
您可能还想阻止输入任何非数字字符,因为对于数字输入来说这object.length
将是一个空字符串,因此其长度为0
。因此该maxLengthCheck
功能将不起作用。
演示 -在此处查看代码的完整版本:http:
//jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/
更新2:这是更新代码:https : //jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
更新3: 请注意,允许输入的小数点以上可能会弄乱数字值。
这非常简单,您可以使用一些JavaScript来模拟一个maxlength
,并检查一下:
//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
keydown
在于您不能在最大字符数处使用退格键。问题keypress
在于您可以复制+粘贴超过最大字符数的字符。
或者,如果您的最大值例如为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">
然后(如果需要),您可以检查输入的是否为真的数字
onKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
您可以将其指定为文本,但可以添加pettern,仅与数字匹配:
<input type="text" pattern="\d*" maxlength="2">
它可以完美工作,并且可以在移动设备上(在iOS 8和Android上测试)弹出数字键盘。
pattern
只导致验证突出。
//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”事件,那么在开发(单元测试)时将不会受到任何用户限制。如果您有不允许特定限制后不允许用户输入的要求,请看一下此代码,然后尝试一次。
另一个选择是仅添加具有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>
最大长度不能以<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"
/>
可以说,您希望最大允许值为1000-键入或使用微调框。
您可以使用以下方式限制微调器的值:
type="number" min="0" max="1000"
并限制什么是键盘使用JavaScript类型的:
onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }
“
<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">
正如其他人所述,min / max与maxlength不同,因为人们仍然可以输入一个大于您期望的最大字符串长度的浮点数。要真正模拟maxlength属性,您可以在紧急情况下执行以下操作(这等效于maxlength =“ 16”):
<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
maxlength
数字输入不支持@PradeepKumarPrabaharan 。在我的示例中,value.slice(0,16)
除非输入值超过16个字符,否则不会插入。
type="number"
会解决这个问题:)。
Maycow Moura的答案是一个好的开始。但是,他的解决方案意味着,当您输入第二位数字时,将停止对该字段的所有编辑。因此,您不能更改值或删除任何字符。
以下代码在2处停止,但允许继续编辑;
//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
我之前遇到过这个问题,我使用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;
}
}
});
我不知道这些事件是否有点矫kill过正,但这解决了我的问题。 JS小提琴
为数字输入设置最大长度的一种简单方法是:
<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-thevil”类型之一,它也可以作为不带jQuery的命名函数“ oninput”使用。
当我发现你不能使用任何的onkeydown
,onkeypress
或onkeyup
事件,包括移动浏览器的完整解决方案。顺便说一句onkeypress
,在chrome / opera for android中已不推荐使用它,并且不再显示该信息(请参阅:UI Events W3C Working Draft,2016年8月4日)。
我想出了一个oninput
仅使用事件的解决方案。您可能需要根据需要执行其他数字检查,例如负/正号或十进制和千位分隔符等,但首先应满足以下条件:
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
属性完全一样或尽可能接近,请使用以下代码:
(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();
这可能会帮助某人。
使用少量的javascript,您可以搜索所有datetime-local输入,搜索用户尝试输入的年份(未来大于100年):
$('input[type=datetime-local]').each(function( index ) {
$(this).change(function() {
var today = new Date();
var date = new Date(this.value);
var yearFuture = new Date();
yearFuture.setFullYear(yearFuture.getFullYear()+100);
if(date.getFullYear() > yearFuture.getFullYear()) {
this.value = today.getFullYear() + this.value.slice(4);
}
})
});