JavaScript輸入類型編號限制為值1和2

Question

可能是用JavaScript完成的。

請參閱W3Schools的此示例

<input type="number"  size="2" min="1" max="2">

即使設置了“最小值”和“最大值”，您仍然可以鍵入所需的任何數字，它將接受該值。 在這種情況下，如何限制用戶，以便他們只能輸入1或2，如果輸入的內容不同，則會發送警報並清除該字段，以便用戶可以重試。

Answer 1

在不使用JS的情況下，您可以設置input字段的pattern屬性，以便用戶至少知道他/她輸入的內容無效。 但是，這不會清除該字段。

演示

的HTML

<input type="number" size="2" min="1" max="2" pattern="[12]">

的CSS

input:invalid { color:red; border:2px solid red; }

Answer 2

為了簡單起見，我在您的輸入中添加了一個id ：

<input type="number" id="myInput" size="2" min="1" max="2">

然后我們可以簡單地添加一個事件監聽器：

document.querySelector('#myInput').addEventListener('input', function(e) {
  if (e.target.value !== '1' && e.target.value !== '2') {
    alert('Invalid number!');
    e.target.value = '';
    e.preventDefault();
  }
});

JSFiddle示例

請記住，使用alert是相當不便的UX，這里僅作為示例。 相反，您可能想要向元素添加error類或彈出模式。

Answer 3

如果您不介意在無效輸入中顯示標准錯誤消息，則還可以使用：

<input type="text" pattern="[1-2]">

編輯：如果在輸入中添加“標題”屬性，則可以設置所需的錯誤消息。

Answer 4

該示例使用HTML 5輸入類型數字 ，並非所有瀏覽器都一致支持。

您可以使用JavaScript或jQuery來限制此范圍。 這絕對是對上面代碼的改進，但是實際上，在實際應用程序中，您可以使用AngularJS ， Knockout或jQuery Validator之類的框架組件來完成此任務。 使用這樣的框架將使您可以在中央位置管理所有驗證，並實現涉及多個屬性的更復雜的邏輯，例如“值二必須大於值一”。

Answer 5

您可以使用jQuery和輸入的checkValidity()方法：

$('[name=points]').bind('keyup',function(){
  if (!$(this).get(0).checkValidity()) {
    $(this).val('');
  }
});

checkValidity()僅適用於現代瀏覽器。

演示： http ： //www.bootply.com/125666

Answer 6

這就是預期<input type=number>起作用的方式：它實際上並不能阻止用戶輸入任意數據（可以，但不一定），但是該控件不能滿足表單提交的約束（如果有的話）與要求不符。

如果只想讓用戶在兩個備選方案之間進行選擇，請使用復選框或兩個單選按鈕，或者使用帶有兩個選項的select元素。 詳細信息取決於這是必須選擇還是可選，以及是否具有默認值。

PS W3schools.com在這個問題上也是虛假的。 鏈接到的示例（與您的代碼不同）並非嚴格錯誤，只是不合邏輯且具有誤導性。