如何限制 html5 数字输入中的最大宽度答案

【问题标题】：How to restrict max width in html5 number input如何限制 html5 数字输入中的最大宽度
【发布时间】：2016-01-01 18:53:24
【问题描述】：

输入字段应该只允许输入 -9.99 .. 99.99 范围内的数字

我在桌面和移动 Chrome 中尝试了下面的页面，但它允许输入大数字，例如 99999

如何使用 html5 解决这个问题？我只能使用 Chrome，这是必需的。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input id="Soiduaeg" name="Soiduaeg" value="" maxlength="5" type="number" pattern="[0-9]+([\.|,][0-9]+)?">
</body>
</html>

【问题讨论】：

尝试使用 max="5" 而不是 maxlength

标签： css html google-chrome input

【解决方案1】：

您应该将min 和max 值添加到输入元素，ant 提供step="any" 或step="0.01" 属性：

<input id="number" type="number" step="any" min="-9.99" max="99.99" />

为了检查输入的值你需要一些javascript：

var $input = document.querySelector('#number');
$input.addEventListener('blur', function(){
    var val = parseFloat($input.value),
    min = parseFloat($input.getAttribute('min')),
    max = parseFloat($input.getAttribute('max'));

    if (val > max) {
        $input.value = max;
    } else if (val < min) {
        $input.value = min;
    }
});

Fiddle demo

【讨论】：

这允许从键盘输入更大的数字。按制表符保留无效号码。如何解决，不允许无效号码？
这会将无效数据保存到数据库中而不会显示任何消息。使用ajax提交表单。表格可以使用热键保存。在这种情况下，不会发生模糊。如何解决这个问题？也许在ajax sbmit方法中循环html5控件，如果值无效则显示消息并取消提交。
在stackoverflow.com/questions/18104094/… max 的回答中使用 keyup 来解决这个问题。将您的代码添加到 keyup 方法中吗？
@Andrus 你应该在后端验证数据（PHP/APSX/NodeJS/Java/Go/Whatever）事件监听器只是为了快速数据评估（我什至不在生产中使用它们） .如果您需要，Key Up 方法很好，我不喜欢它，因为如果输入的数字太大或太小，我无法编辑值（它将值设置为可用的最小值）。但是，服务器端验证比尝试在前端解决所有问题要好。在 Froontend 中，任何人都可以删除表单中绑定的 JS 或规则，或提交以使用 ajax。

【解决方案2】：

对于十进制数，将其绑定到 oninput 事件

例如：5.2 (nnnnn.dd)

//max number positions 5 before '.' or ','
var n = 5;
//max number of digit
var d = 2;
//max text length 8
var l = n + d + 1;

if (this.value.length > n && 
   (this.value.indexOf('.') == -1 && this.value.indexOf(',') == -1))
{ 
    this.value = this.value.slice(0,n); 
} 
else 
{ 
    if (this.value.length > l)  
        this.value = this.value.slice(0,l); 
};
if (
    (this.value.indexOf('.') != -1 && this.value.length - d >= this.value.indexOf('.')) ||
    (this.value.indexOf(',') != -1 && this.value.length - d >= this.value.indexOf(','))
)
{
    this.value = this.value.slice(0, this.value.length - (this.value.length - (this.value.indexOf('.') +d+1)));
}

【讨论】：