Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Number Object
The HTML DOM Input Number Object represents an <input> element with type="number". This object provides properties and methods to interact with number input fields programmatically through JavaScript.
The Input Number Object is useful for creating dynamic forms, validating numeric input, and implementing custom number controls with step increment/decrement functionality.
Syntax
You can create an Input Number Object in two ways −
Creating a new Input Number element:
var numberInput = document.createElement("INPUT");
numberInput.setAttribute("type", "number");
Accessing an existing Input Number element:
var numberInput = document.getElementById("myNumber");
Properties
The Input Number Object supports the following properties −
| Property | Description |
|---|---|
| autocomplete | Sets or returns the value of the autocomplete attribute of the number input field. |
| autofocus | Sets or returns whether the input number field should automatically get focus when the page loads. |
| disabled | Sets or returns whether the input number field is disabled. |
| defaultValue | Sets or returns the default value of the input number field. |
| form | Returns a reference to the form that contains the input number field. |
| list | Returns a reference to the datalist that contains the input number field. |
| max | Sets or returns the value of the max attribute of the input number field. |
| min | Sets or returns the value of the min attribute of the input number field. |
| name | Sets or returns the value of the name attribute of the input number field. |
| placeholder | Sets or returns the value of the placeholder attribute of the input number field. |
| readOnly | Sets or returns whether the input number field is read-only. |
| required | Sets or returns whether the number field must be filled out before submitting the form. |
| step | Sets or returns the value of the step attribute of the input number field. |
| type | Returns the type of the input number field (always "number"). |
| value | Sets or returns the value of the input number field. |
Methods
The Input Number Object supports the following methods −
| Method | Description |
|---|---|
| stepUp() | Increments the value of the input number field by a specified number. |
| stepDown() | Decrements the value of the input number field by a specified number. |
Creating Input Number Object
Following example demonstrates how to create an Input Number Object dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Create Input Number Object</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Create Input Number Field</h2>
<button onclick="createNumberInput()">Create Number Input</button>
<div id="container" style="margin-top: 20px;"></div>
<script>
function createNumberInput() {
var numberInput = document.createElement("INPUT");
numberInput.setAttribute("type", "number");
numberInput.setAttribute("min", "1");
numberInput.setAttribute("max", "100");
numberInput.setAttribute("step", "1");
numberInput.setAttribute("placeholder", "Enter a number");
numberInput.style.padding = "8px";
numberInput.style.margin = "10px";
document.getElementById("container").appendChild(numberInput);
}
</script>
</body>
</html>
The output shows a button that creates a new number input field when clicked −
Create Input Number Field [Create Number Input] (Clicking creates a number input with min=1, max=100, step=1)
Using stepUp() and stepDown() Methods
Following example shows how to use the stepUp() and stepDown() methods −
<!DOCTYPE html>
<html>
<head>
<title>stepUp() and stepDown() Methods</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Number Input Step Controls</h2>
<input type="number" id="myNumber" value="5" min="0" max="20" step="2">
<br><br>
<button onclick="stepUpValue()">Step Up (+2)</button>
<button onclick="stepDownValue()">Step Down (-2)</button>
<p id="result"></p>
<script>
function stepUpValue() {
var input = document.getElementById("myNumber");
input.stepUp();
document.getElementById("result").innerHTML = "Current value: " + input.value;
}
function stepDownValue() {
var input = document.getElementById("myNumber");
input.stepDown();
document.getElementById("result").innerHTML = "Current value: " + input.value;
}
</script>
</body>
</html>
The output displays a number input with buttons to increment and decrement the value by the step amount −
Number Input Step Controls [5] [Step Up (+2)] [Step Down (-2)] Current value: (updates based on button clicks)
Accessing Input Number Properties
Following example demonstrates how to access and modify various properties of the Input Number Object −
<!DOCTYPE html>
<html>
<head>
<title>Input Number Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Number Input Properties Demo</h2>
<form id="myForm">
<input type="number" id="ageInput" name="age" min="18" max="100"
step="1" placeholder="Enter your age" required>
</form>
<br>
<button onclick="showProperties()">Show Properties</button>
<button onclick="modifyProperties()">Modify Properties</button>
<div id="output" style="margin-top: 15px;"></div>
<script>
function showProperties() {
var input = document.getElementById("ageInput");
var output = document.getElementById("output");
output.innerHTML =
"<strong>Properties:</strong><br>" +
"Type: " + input.type + "<br>" +
"Name: " + input.name + "<br>" +
"Min: " + input.min + "<br>" +
"Max: " + input.max + "<br>" +
"Step: " + input.step + "<br>" +
"Required: " + input.required + "<br>" +
"Form ID: " + input.form.id;
}
function modifyProperties() {
var input = document.getElementById("ageInput");
input.min = "21";
input.max = "65";
input.placeholder = "Age (21-65)";
document.getElementById("output").innerHTML = "<strong>Properties modified!</strong>";
}
</script>
</body>
</html>
The output shows how to read and modify properties of the number input field −
Number Input Properties Demo [Enter your age] [Show Properties] [Modify Properties] (Shows properties like Type: number, Name: age, Min: 18, etc.)
Conclusion
The HTML DOM Input Number Object provides comprehensive control over number input fields through JavaScript. It offers properties for configuration (min, max, step) and methods for programmatic value manipulation (stepUp, stepDown). This object is essential for creating interactive numeric forms and custom number controls in web applications.
226 Views
