javascript - Preventing users from entering non-digits in input text field with HTML5 - Stack Overflow

admin管理员组

文章数量:1426918

I have an input field of type text. Users should only be allowed to enter digits in the field. If they attempt to enter a non-digit, like a character, it should be ignored and not display in the field ( and not submitted to the server). I thought I could achieve this with the HTML5 pattern attribute:

<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">

But it doesn't work as expected. I can still enter any character into the field. There is no form submit button here. As soon as they tab out of field, the ajax call is made.

How can I achieve what I want with html5?

I have an input field of type text. Users should only be allowed to enter digits in the field. If they attempt to enter a non-digit, like a character, it should be ignored and not display in the field ( and not submitted to the server). I thought I could achieve this with the HTML5 pattern attribute:

<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">

But it doesn't work as expected. I can still enter any character into the field. There is no form submit button here. As soon as they tab out of field, the ajax call is made.

How can I achieve what I want with html5?

• javascript
• html
• css

Share Improve this question Follow asked May 25, 2017 at 0:24 Daniel ViglioneDaniel Viglione 9,57299 gold badges7979 silver badges121121 bronze badges 2

• It's unfriendly to prevent entry of characters, much better to just show a warning message that the content is invalid and don't submit the data until it passes your checks. E.g. people might copy and paste data that contains invalid characters, intending to edit them out. Most mon for me is BSB number, which is nearly always written "000-999" but inputs only want digits like "000999". Why not let me paste "012-345" then let me remove the dash? – RobG Commented May 25, 2017 at 0:32
• 1 Are you looking for type="number" – Chris Happy Commented May 25, 2017 at 0:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

So you can totally do that by adding type="number" to your input field, It'll work in most browsers.

I'd remend using sort of regex and a bit of JS to evaluate the input and then replace the input with permitted characters.

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);
});

Here's a quick codepen

I'd also put a bit of validation on the model, just in case someone bypasses the JS.

I think it won't work with plain html5 since the pattern goes into affect after you submitted the form (It will make validation fail). But since you are already using js, you can just do it with for example the jQuery.keypress() function.

本文标签： javascriptPreventing users from entering nondigits in input text field with HTML5Stack Overflow