如何限制 HTML5 「number」元素中的可能輸入？

問題描述

對於<input type="number"> 元素，maxlength 不起作用。如何限制該數字元素的 maxlength？

最佳解決方案

並且您可以新增一個 max 屬性，該屬性將指定可插入的最高可能的數字

<input type="number" max="999" />

如果同時新增了 max 和 min 值，則可以指定允許值的範圍：

<input type="number" min="1" max="999" />

以上內容仍然不能阻止使用者手動輸入超出指定範圍的值。相反，他會在提交表單時顯示一個彈出視窗，告訴他在此範圍內輸入一個值，如螢幕截圖所示：

次佳解決方案

您可以指定 min 和 max 屬性，這將只允許在特定範圍內進行輸入。

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

但這隻適用於微調控制按鈕。雖然使用者可能能夠輸入比允許的 max 大的數字，但表單將不會提交。

從 Chrome 15 截圖

您可以在 JavaScript 中使用 HTML5 oninput 事件來限制字元數：

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}

第三種解決方案

如果您正在尋找一種移動 Web 解決方案，您希望使用者可以在其中檢視數字鍵盤而不是全文鍵盤。使用 type = “tel” 。它將與 maxlength 一起工作，可以節省您建立額外的 JavaScript 。

Max 和 Min 仍然允許使用者輸入超過 max 和 min 的數字，這不是最佳的。

第四種方案

你可以結合所有這些：

<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />

<script>
  // This is an old version, for a more recent version look at
  // https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
  function maxLengthCheck(object)
  {
    if (object.value.length > object.maxLength)
      object.value = object.value.slice(0, object.maxLength)
  }
</script>

更新：您可能還想防止輸入任何 non-numeric 字元，因為 object.length 將是數字輸入的空字串，因此其長度將為 0 。因此 maxLengthCheck 功能將無法正常工作。

解決方法：參見 this 或 this 例子。

演示 – 請參閱程式碼的完整版本：http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

更新 2：這是更新程式碼：https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

更新 3：請注意，輸入超過小數點可能會弄亂數字值。

第五種方案

這很簡單，有些 javascript 可以模擬一個 maxlength，看看：

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />

第六種方案

或者如果您的最大值為 99，最小值為 0，則可以將其新增到輸入元素 (您的值將被最大值重寫等)

<input type="number" min="0" max="99" 
   onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

然後 (如果你想要的話)，你可以檢查輸入是否真的是數字

第七種方案

您可以將其指定為文字，但新增僅與匹配數字的 pettern：

<input type="text" pattern="d*" maxlength="2">

它的工作原理完美，還可以在手機上 (在 iOS 8 和 Android 上測試) 彈出數字鍵盤。

第八種方案

最大長度不能與<input type="number"一起工作，我知道是使用 oninput 事件來限制最大長度。請參閱以下程式碼以進行簡單的實現。

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />

第九種方案

Maycow Moura 的回答是一個好的開始。但是，他的解決方案意味著當您輸入第二個數字時，所有的欄位編輯都會停止。所以你不能更改值或刪除任何字元。

以下程式碼停止在 2，但允許編輯繼續;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

第十種方案

我以前有這個問題，我使用 html5 數字型別和 jQuery 的組合來解決它。

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

指令碼：

$("input[name='minutes']").on('keyup keypress blur change', function(e) {
    //return false if not 0-9
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }else{
        //limit length but allow backspace so that you can still delete the numbers.
        if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
            return false;
        }
    }
});

我不知道事件是否有點過分，但是它解決了我的問題。 JSfiddle

參考文獻

How can I limit possible inputs in a HTML5 「number」 element?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

如何限制 HTML5 「number」元素中的可能輸入？