html设定输入数字数目,HTML文本输入仅允许数字输入

JavaScript

注：这是最新的答案。下面的注释指的是处理密钥的旧版本。

这个setInputFilter以下脚本中的函数允许您使用任何文本上的输入过滤器，包括各种数字过滤器。这将正确处理复制+粘贴、拖放、键盘快捷键、上下文菜单操作、不可键入的键、光标位置、所有键盘布局和自IE9以来所有浏览器. 注意你仍然必做服务器端验证！// Restricts input for the given textbox to the given inputFilter.function setInputFilter(textbox, inputFilter) {

["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {

textbox.addEventListener(event, function() {

if (inputFilter(this.value)) {

this.oldValue = this.value;

this.oldSelectionStart = this.selectionStart;

this.oldSelectionEnd = this.selectionEnd;

} else if (this.hasOwnProperty("oldValue")) {

this.value = this.oldValue;

this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);

}

});

});}

用法：// Restrict input to digits and '.' by using a regular expression filter.setInputFilter(document.getElementById("myTextBox"),

function(value) {

return /^\d*\.?\d*$/.test(value);});

您可能需要使用的一些输入过滤器：整型价值观(正面和负面)：

/^-?\d*$/.test(value)

整型数值(仅为正值)：

/^\d*$/.test(value)

整型数值(正数和上限以下)：

/^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)

浮点值(允许两者兼而有之)

.和

,作为十进制分隔符)：

/^-?\d*[.,]?\d*$/.test(value)

货币值(即最多小数点两位)：

/^-?\d*[.,]?\d{0,2}$/.test(value)

十六进制价值：

/^[0-9a-f]*$/i.test(value)

jQuery

还有一个jQuery版本。看见这个答案或者自己试试论JSFiddle.

HTML 5

HTML 5有一个本机解决方案(见规格)，但请注意，浏览器支持各不相同：大多数浏览器只在提交表单时，而不是在输入时验证输入。

不要支持

step, min和

max属性。

Chrome(71.0.3578.98版)仍然允许用户输入字符

e和

E进入战场。亦见

Firefox(Version64.0)和Edge(EdgeHTMLVersion 17.17134)仍然允许用户输入

任何文字进入字段。

更复杂的验证选项

如果您想做一些其他的验证工作，这可能很方便：