Coding Triumph

Helpful code snippets & tutorials

How to restrict the input element to numeric values only in HTML

In this post, I’ll be showing you two easy ways you can use to restrict an HTML input element to allow only numeric values.

1. Set the input type to “number”:

Inputs of type “number” have built-in validation to reject non-numerical values. The downside is the spin-buttons that appear when hovering over the input box (check the example below)

<input type="number" value='10'>

Try it:

2. The “input” event and regular expression with JavaScript:

If you don’t like the spin-buttons, this is the right way for you.

Note: we are using the input of type text.

<!-- if the input value is not a number, replace it with an empty string -->
<input type="text" value="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '')">

Try it:

If you like this post, please share
Notify of
Inline Feedbacks
View all comments