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

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

您应该向输入元素添加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;
    }
});

Fiddle演示

对于十进制数字，请将其绑定到输入事件

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

相关内容

最新更新

热门标签：