如何在 HTML5 数字输入框中限制最大宽度

Question

如何在 HTML5 数字输入框中限制最大宽度

3

输入框应仅允许输入范围在-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>

- Andrus

尝试使用“max =”5“而不是maxlength”。 - Shaher Jamal Eddin

2个回答

0

对于十进制数，将其绑定到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)));
}

- Ch'nycos

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bogdan Kuštan · Accepted Answer

你应该在输入元素中添加min和max值，并提供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;
    }
});

演示代码