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. Let us see how.
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.
- Make a submit button after that. If we type anything other than numbers instead of characters, the form won't be submitted.
- However, each browser behaves differently from the others.
- The example below in Firefox accepts any input in the input field. However, when you click the button, the value is prevented 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 'drop' and 'paste' 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.
<input type="number">
Example Code:
<form action="">
<input type="number" ondrop="return false;" onpaste="return false;" />
<button type="submit" value="Submit">Click</button>
</form>
Client-Side Validation in JavaScript to Allow Only Numeric Input in HTML
Client-side validation must be added to allow typing only numeric numbers in the text area, even though the above solution functions smoothly in all browsers. We must write some JavaScript to accomplish this.
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. Use the & & operator, 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, respectively. JavaScript will return only 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:
<form>
<input type="number" ondrop="return false;" onpaste="return false;"
onkeypress="return event.charCode>=48 && event.charCode<=57" required/>
<button type="submit" value="Submit">Click</button>
</form>
Example for HTML Input Only Numbers
Example 1:
The example program to restrict an HTML input box to just accepting numeric input is provided below:
<!DOCTYPE html>
<html>
<center>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
input[type=number] {
width: 10%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid mediumseagreen;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>Tutorials&Examples</h1>
<form action = "" method = "get">
Enter your area Pincode -
<input type="number"> <br><br>
<input type="submit" value="Submit">
</form>
</body>
</center>
</html>
It will not enable us to enter any values other than numbers. Therefore, it only accepts values that are numbers.
Example 2:
Another example program to restrict an HTML input box only to accept numeric input is provided below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form action = "" method = "get">
Phone Number:
<input type="number" name="num" min="1" max="20"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
If a user inputs text and presses the submit button after restricting the input field to numbers, the message "Please enter a number" will appear.
The number input field's value can also be restricted.
When the input box is limited to a number, the message "Value must be less than or equal to the limit value specified (20)" appears if a user inputs more than the limit and presses the submit button.