如何限制在HTML5号码输入最大宽度

输入字段应该只允许范围-9.99输入数字.. 99.99如何限制在HTML5号码输入最大宽度

我试过页面下方的桌面和移动浏览器，但它允许进入大的数字，例如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>

来源

2016-01-01 Andrus

尝试最大= “5” 的最大长度 –

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

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

对于检查inputed值你需要一些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

来源

2016-01-01 19:02:24

不是这样，从键盘输入的数字更大。按下标签以保留无效号码。如何解决，以便无效号码不被允许？ – Andrus

查看更新的答案 –

这会将无效数据保存到数据库中，而不会显示任何消息。表单使用ajax提交。表格可以使用热键保存。在这种情况下，模糊不会发生。如何解决这个问题？也许循环Ajax sbmit方法中的html5控件，如果值无效，则显示消息并取消提交。 – Andrus

为十进制数，结合这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))); 
}

来源

2016-01-19 10:30:00

如何限制在HTML5号码输入最大宽度

回答

相关问题