Restrict an HTML input text box to allow only numeric values

This post will discuss how to restrict an HTML input text box to allow only numeric values.

1. Using `<input type="number">`

The standard solution to restrict a user to enter only numeric values is to use <input> elements of type number. It has built-in validation to reject non-numerical values. This is demonstrated below:

HTML

1 2	<label for="salary">Enter your salary:</label> <input type="number" id="salary" name="salary">

Edit in JSFiddle

2. Using `pattern` attribute

Alternatively, you can use the pattern attribute to specify a regular expression that should match the provided input.

The usage of the pattern attribute is demonstrated below. If the values contain non-digit characters, the element matches the :invalid CSS pseudo-classes.

HTML

1 2	<label for="salary">Enter your salary:</label> <input type="text" id="salary" name="salary" pattern="[0-9]+">

CSS

input:invalid {

border: 3px solid red;

}

Edit in JSFiddle

3. Using `oninput` event

Another solution is to use the oninput property to processes input events on the <input> elements. To restrict the user to enter only numeric values, you can do like:

HTML

<label for="salary">Enter your salary:</label>

<input type="text" id="salary" name="salary"

oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

Edit in JSFiddle

That’s all about restricting an HTML input text box to allow only numeric values.

Restrict an HTML input text box to allow only numeric values

1. Using <input type="number">

HTML

2. Using pattern attribute

HTML

CSS

3. Using oninput event

HTML

Share this:

1. Using `<input type="number">`

2. Using `pattern` attribute

3. Using `oninput` event