HTML Input Only Numbers

Introduction

The input tag supports a variety of input formats, including text, numbers, passwords, and emails. Here are some sample codes for an HTML input box that only accepts integers and a textbox that only accepts numbers. The question is whether there is a quick way to limit text input in HTML to accept numeric keystrokes (numbers), which include the period symbol, and the answer is yes.

How to limit the HTML input box so that it only accepts numbers?

The input tag in HTML is used to collect user input. Using the input tag's type attribute, we can define the input type. Many input formats, including text, numbers, passwords, emails, and more, are accepted by the input tag.

In HTML, we can restrict input to numbers exclusively by using the type property. Make an input tag, for instance, and set its type property to number. After that, make a submit button. If we type anything other than numbers instead of characters, the form won't be submitted. However, each browser behaves differently.

The example below in Firefox accepts any input in the input field. However, when you click the button, it prevents the value from being submitted. With Chrome, only numeric characters can be typed. Other characters are not allowed. Pasting is permitted for other inputs in Firefox but not for Chrome.

For example, in Firefox, if we copy and paste text into the input field, it will be pasted; with Chrome, this does not occur. The same thing happens when you drag and drop items into the text field.

Therefore, we can prevent the text box from being used for drag-and-drop and paste in order to provide some validation. For example, include the 'ondrop' and 'onpaste' properties in the input tag and set their values to return false.

This will prevent the text area's drag-and-drop and copy-paste functions from working.

Syntax

The syntax to restrict an HTML input box only to accept numeric input is as follows:

Example Code:

Output

HTML Input Only Numbers

Client-Side Validation in JavaScript to Allow Only Numbers as Input in HTML

Client-side validation must be added to allow typing only numeric numbers in the text area, even though the above solution does not function flawlessly in all browsers. We must write some JavaScript to accomplish it.

We must include such validation, wherein input ranging from 0 to 9 can only be approved. To do it, JavaScript has an event called onkeypress.

When the user presses a key, the onkeypress event is initiated. We are limited to returning values in the range of 0 to 9 in the onkeypress event.

To find the character code of the input that was pressed, we can utilize the charCode field.

Write the onkeypress event, for instance, as an attribute in the input tag.

The statement event is returned within the attribute. The && operator is used, like in the example below, to set charCode >= 48 and event charCode = 57. Then, add the necessary property at the end of the input tag.

In the example below, the Unicode character codes for 0 and 9 are 48 and 57. JavaScript will only return values between 0 and 9.

It shows us how to use the charCode property in conjunction with the onkeypress event to restrict HTML input to numbers only.

Example Code:

Output

HTML Input Only Numbers

Example for HTML Input Only Numbers

The example program to restrict an HTML input box to just accepting numeric input is provided below:

Output

HTML Input Only Numbers

It will not enable us to enter any values other than numbers. Therefore, it only accepts values that are numbers.

Conclusion

In conclusion, numeric input validation in 'HTML forms remains a critical mechanism against errors in data. Applying this restriction prevents users from submitting wrong values, restricts errors, and creates an efficient user experience. Using the type="number" attribute inside '<input>' tags calls for numeric inputs only, resulting in enhanced data processing and analysis. Besides, client-side verification through JavaScript clearly improves the accuracy level of the system and provides immediate feedback to the users. The applicability of these approaches forms precise data collection, increases product usability, and supports efficiency in web applications.






Latest Courses