5

CodePen: http://codepen.io/leongaban/pen/hbHsk

I've found multiple answers to this question on stack here and here

However they all suggest the same fix, using type="number" or type="tel"

None of these are working in my codepen or project :(

enter image description here

Do you see what I'm missing?

3
  • Seems like you need some client side scripting to intercept non numbers and reject them.
    – hoss
    Aug 1, 2013 at 16:09
  • What browser are you using? type="number" should works. So far, to force only numbers in all browsers you will need javascript validation, if you are sure that users only use modern browses you can make it only with html5
    – Hernandcb
    Aug 1, 2013 at 16:14
  • I use both Chrome (main browser) and FireFox... both are still allowing me to type Letters
    – Leon Gaban
    Aug 1, 2013 at 16:17

5 Answers 5

7

Firstly, what browsers are you using? Not all browsers support the HTML5 input types, so if you need to support users who might use old browsers then you can't rely on the HTML5 input types working for all users.

Secondly the HTML5 input validation types aren't intended to do anything to stop you entering invalid values; they merely do validation on the input once it's entered. You as the developer are supposed to handle this by using CSS or JS to determine whether the field input is invalid, and flag it to the user as appropriate.

If you actually want to prevent non-digit characters from ever getting into the field, then the answer is yes, you need to use Javascript (best option is to trap it in a keyUp event).

You should also be careful to ensure that any validation you do on the client is also replicated on the server, as any client-side validation (whether via the HTML5 input fields or via your own custom javascript) can be bypassed by a malicious user.

2
  • Thanks, time to search for the best javascript / jQuery methods to take care of this now... imho this should be taken care off on the markup level. Maybe HTML6 :)
    – Leon Gaban
    Aug 1, 2013 at 16:20
  • 3
    the trouble with doing it in the markup is that there's too many edge cases and too many possible ways of doing it; they'd never please everyone. For example, what do you do if someone copy+pastes a string into your field? If it contains digits but isn't entirely digits, how do you handle that? Some sites would want it blocked entirely, others accept the digit characters. Others accept digits up until the first non-digit... etc. As I say, lots and lots of edge cases.
    – Spudley
    Aug 1, 2013 at 16:25
7

It doesn't stop you from typing, but it does invalidate the input. You can see that if you add the following style:

input:invalid {
  border:1px solid red;
}
2
  • Ah, so you do need a Javascript fix to this?
    – Leon Gaban
    Aug 1, 2013 at 16:09
  • 1
    To stop them from actually typing letters? I believe so.
    – Tim Mac
    Aug 1, 2013 at 16:10
6

I use a dirty bit of JS inline, it's triggered upon paste/keying (input).

Within your input tag add the following:

oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"

All it's doing is replacing any character not 0-9 with nothing.

I've written a tiny demo which you can try below:

Numbers only: <input oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"></input>

6
  • 1
    For some reason this clears out the entire field when I press any non numeric character. Sep 16, 2019 at 6:57
  • @AlexanderSuraphel - Is that a result from using the "Run code snippet" button above?? Jan 15, 2020 at 16:43
  • Hi! Looks great! How can one allow for either ,or . as well? Should I drop another question? Thanks!
    – onit
    Sep 22, 2022 at 14:53
  • Apologies for the delay, from my line above in between "replace(" and "gmi," replace the current regex with "/(?![0-9|\.|\,])./" (without speechmarks) this will enable "," and "." for your input field. May 1, 2023 at 11:59
  • As Alexander has mentioned, this code works on my page but it clears out the entire field if any non-digit is pressed. Strangely, your code snippet here seems to run fine without this issue. Can you advice on how to resolve this?
    – great
    Sep 15, 2023 at 21:29
4

Just add a check to the onkeypress event to make sure that the no alphanumeric characters can be added

 <input 
     type="text" 
     placeholder="Age" 
     autocomplete="off" 
     onkeypress="return event.charCode >= 48 && event.charCode <= 57" 
     maxlength="10" 
 />
2
  • This disables using the backspace key
    – karlo1zg
    Sep 24, 2019 at 10:58
  • Just what I need and it works in IE 11, Firefox and Chrome as of the latest versions Dec 6, 2019 at 20:46
3

Firstly, in your Codepen, your inputs are not fully formatted correctly in a form.... Try adding the <form></form> tags like this:

<form>
<lable>input 1 </lable>
<input type='tel' pattern='[0-9]{10}' class='added_mobilephone' name='mobilephone' value='' autocomplete='off' maxlength='20' />

<br/>

<lable>input 2 </lable>
<input type="number" pattern='[0-9]{10}'/>

<br/>

<lable>input 3 </lable>
<input type= "text" name="name" pattern="[0-9]"  title="Title"/>
</form>

1
  • This doesn't work in Internet explorer. Any solution that works in IE, Chrome and Safari?
    – Er. ßridy
    Jan 9, 2018 at 6:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.