Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Allow only Positive Numbers in the Input Number Type
The <input> tag specifies a data entry field for the user. It is the most crucial form element. It is utilized to design interactive controls for online forms that collect user data. Depending on the type attribute, it can be displayed in a variety of ways. Because of the sheer number of input type and attribute combinations, it is one of the most powerful and complex tools in HTML.
The <input> Type
The type attribute indicates the type of <input> element that will be displayed. The default type is "text" if no type attribute is specified. The syntax is as shown below.
<input type="value">
Some of the other input types include button, submit, image, password, date, number, time etc.
Other Attributes: Because of its attributes, the <input> element is extremely powerful, the type attribute being the most important one. Because every <input> element, regardless of type, implements the HTMLInputElement interface, they all have the same set of attributes. However, most attributes have an effect on only a subset of the input types. Furthermore, the way some attributes affect an input depends on the input type, with different input types being affected in different ways.
Here are a few examples of the combinations of input type and their attributes:
The input height and width attributes define the height and width of an <input type="image"> element.
<input type="image" src="demo.png" height="45" width="35" >
The legal number intervals for an input field are specified by the input step attribute. For step=3, the number pattern would be 0, 3, 6, 9…
<input type="number" name="multiplesof3" step="3">
The input size attribute defines the visible width of an input field, in characters. The size parameter is set to 20 by default. Text, search, tel, url, email, and password are among the input kinds that are compatible with the size attribute.
<input type="text" size="14">
Input type Number
The number input type creates an input field for entering a numeric value. By default, it allows users to enter both negative and positive values manually or via the top and bottom arrows present at the right side of the input area.
The following attributes can help us enforce restrictions on the input number type.
max - specifies the maximum value that can be entered
min - specifies the minimum value that can be entered
step - specifies the legal number of intervals
value - specifies the default value
The <input type="number"> specifies a field for entering a number, as we know. In order to restrict the input field to accept only positive numbers we can use the following methods.
Using the HTML Input ‘min’ Attribute
It specifies the most negative value in the allowed range of values. If the value entered into the element is less than this, the constraint validation fails. If the min attribute value is not a number, the element has no minimum value. This value must be less than or equal to the maximum attribute value. If the ‘min’ value is set to zero, only positive numbers are allowed.
Example
The following example depicts the usage of the ‘min’ attribute to allow only positive numbers in the input field.
<!DOCTYPE html>
<html>
<head>
<title>How to Allow Only Positive Numbers in the Input Number Type</title>
</head>
<body>
<input type="number" min="0" value="5">
</body>
</html>
The above example restricts negative numbers only via the up and down arrows but negative numbers can still be entered manually and hence this does not provide the complete solution to our problem.
Using JavaScript
To prevent the entry of negative numbers, we must include the onkeypress attribute and employ some JavaScript. When the user hits a key that generates a character value, this event takes place. These comprise keys like the punctuation, numeric, and alphabetic keys. The key that caused the onkeypress event to occur has its Unicode character code returned by the charCode property. This is very lightweight because it can be directly placed in HTML. When a key is pressed, JavaScript determines whether it is a number and whether it is positive.
Example
The following code shows how the addition of the onkeypress attribute restricts negative numbers via the charCode property.
<!DOCTYPE html>
<html>
<head>
<title>How to Allow Only Positive Numbers in the Input Number Type</title>
</head>
<body>
<input type="number" min="0" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))">
</body>
</html>
Using the ‘oninput’ Attribute
This method restricts negative numbers via arrows and also prevents them from being entered manually, solving the problem completely.
An alternative to the ‘onkeypress’ attribute is the ‘oninput’ attribute. When a user enters a value (oninput), it is either valid (validity.valid) or replaced by an empty string (value=").
Example
The following code uses the oninput attribute to restrict negative values.
<!DOCTYPE html>
<html>
<head>
<title>How to Allow Only Positive Numbers in the Input Number Type</title>
</head>
<body>
<input type="number" min="0" oninput="validity.valid||(value='');">
</body>
</html>
To sum it up, the ‘min’ attribute and the ‘onkeypress’/’oninput’ attributes with a little bit of JavaScript can be used to allow only positive numbers in the input field.
5K+ Views
