如何限制在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號碼輸入最大寬度

回答

相關問題