帶範圍限制的僅數字輸入框

我知道您可以使用<input type="number">將文本框限制爲僅限整數輸入。但是，我想知道是否有範圍限制這個可能性？限制因素是沒有使用JavaScript函數檢查每keyup。這似乎有點沉重和不必要。我認爲HTML5會有內置的功能來處理這種邊緣情況，但我一直無法找到任何東西。帶範圍限制的僅數字輸入框

例如，我有一個重複數據刪除率的輸入框，我想將用戶限制爲3和7之間

輸入數字（整型或浮點型）我有當前與整個一個選項選下拉和一半的數字，但這並不能提供我正在尋找的詳細程度。

來源

2015-06-19 99ProblemsAndTheyreAllCode

你會想到HTML5會有內置的東西...但遺憾的是，我還沒有找到任何東西。我相信你必須使用其中一個Javascript庫，或者自己寫一個快速的驗證腳本。我不一定會在提交表單之前使用keyUp ... onBlur或者驗證。我的兩分錢。 – Charlie74

正如我在前面的評論中所提到的......沒有任何HTML只在這裏（你會認爲應該有）。但是...因爲你在你的問題中包含了Javascript和jQuery，所以我會提出這個簡單而輕便的解決方案。

假設這HTML ...

<form> 
    <input type="number" min="3" max="7" step="0.5"></input> 
</form>

然後我們就可以使用這個腳本來處理我們的要求。

$(document).ready(function() { 
    $('input').change(function() { 
     var n = $('input').val(); 
     if (n < 3) 
     $('input').val(3); 
     if (n > 7) 
     $('input').val(7); 
    }); 
});

基本上，變化事件觸發後，我們做一個快速檢查，以確保該值在標準範圍內，如果沒有，迫使他們在範圍之內回來。

來源

2015-06-19 23:25:38 Charlie74

只是標記這個傢伙回答正確，繼續前進:) –

<input type="number" min="3" max="7" step="0.01"></input>

step有助於限制最小數量粒度。

來源

2015-06-19 22:50:49

執行此操作並在右側使用向上和向下箭頭時限制該值。但是，它不限制用戶手動輸入他們想要的任何值。 – 99ProblemsAndTheyreAllCode

我不得不同意OP。這不會真正限制輸入，除非用戶實際上使用向上/向下箭頭填充值。 – Charlie74

我認爲，當作爲表單的一部分使用時，除非值處於正確範圍內，否則提交操作將被禁止。我一直使用這種類似bootstrap的東西，它突出顯示了無效字段，所以用戶在表單驗證之前輸入內容的邊界情況從來都不是問題。 –

這裏的用於檢查輸入是使用由大多數瀏覽器所支持的HTML5 constraint validation API包含在給定範圍內的整數號碼一個簡單的解決方案：

<label for="n">Enter integer number 1&le;n&le;10</label> 
 
<input type="number" min="1" max="10" step="1" id="n" oninput="(validity.valid)||(value='');">

爲了驗證和自動根據validity statesrangeOverflow，rangeUnderflow，stepMismatch：

<label for="numberSize">Enter integral number 1&le;n&le;10</label> 
 
<input type="number" min="1" max="10" id="numberSize" oninput="(!validity.rangeOverflow||(value=10)) && (!validity.rangeUnderflow||(value=1)) && 
 
(!validity.stepMismatch||(value=parseInt(this.value)));">

這將發送

所有輸入> max與最大
輸入<分鐘至最低

和截斷十進制值。

來源

2017-11-11 18:59:07 user2314737

帶範圍限制的僅數字輸入框

回答

相關問題