阻止用戶使用HTML5在輸入文本字段中輸入非數字

Question

我有一個文本類型的輸入字段。 只允許用戶在字段中輸入數字。 如果他們嘗試輸入非數字，如字符，則應忽略它並且不在字段中顯示（並且不提交給服務器）。 我以為我可以用HTML5模式屬性實現這個目的：

<input class="form-control" data-remote="true" data-url="/contacts" data-method="put" pattern="^[0-9]*$" type="text" value="123456" name="contact[phone]" id="contact_phone">

但它沒有按預期工作。 我仍然可以在場上輸入任何角色。 這里沒有表單提交按鈕。 一旦他們跳出字段，就會進行ajax調用。

如何用html5實現我想要的？

Answer 1

所以你可以通過在輸入字段中添加type="number"來完全做到這一點， 它可以在大多數瀏覽器中使用 。

我建議使用一些正則表達式和一些JS來評估輸入，然后用允許的字符替換輸入。

var phone_input = document.getElementById('contact_phone');

function validDigits(n){
  return n.replace(/[^0-9]+/g, '');
}

phone_input.addEventListener('keyup', function(){
  var field = phone_input.value;
  phone_input.value = validDigits(field);
});

這是一個快速的代碼

我還對模型進行了一些驗證，以防有人繞過JS。

Answer 2

我認為它不適用於普通的html5，因為模式在你提交表單后生效（它會使驗證失敗）。 但是因為你已經在使用js，所以你可以使用例如jQuery.keypress()函數。