Question

输入字段应允许仅在-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>

Answer 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

Answer 2

表示十进制数，将其绑定到oninput事件

ex：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)));
}

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

2 个答案: