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
HTML5 Input type=number removes leading zero
HTML5's input type="number" automatically removes leading zeros because it treats the value as a numeric data type. This creates issues when you need to preserve leading zeros, such as for international phone numbers, postal codes, or ID numbers.
The Problem
When using type="number", browsers strip leading zeros from the input value:
<!DOCTYPE html>
<html>
<body>
<input type="number" id="numberInput" value="00123">
<button onclick="showValue()">Show Value</button>
<p id="output"></p>
<script>
function showValue() {
let input = document.getElementById('numberInput');
document.getElementById('output').innerHTML = 'Value: ' + input.value;
}
</script>
</body>
</html>
Value: 123
Solution 1: Using input type="tel"
For phone numbers, use type="tel" with a numeric pattern. This preserves leading zeros while showing numeric keyboards on mobile devices:
<!DOCTYPE html>
<html>
<body>
<input type="tel" pattern="[0-9]*" id="telInput" value="00123456789">
<button onclick="showTelValue()">Show Value</button>
<p id="telOutput"></p>
<script>
function showTelValue() {
let input = document.getElementById('telInput');
document.getElementById('telOutput').innerHTML = 'Phone: ' + input.value;
}
</script>
</body>
</html>
Phone: 00123456789
Solution 2: Using input type="text"
For other numeric data with leading zeros, use type="text" with a numeric pattern:
<!DOCTYPE html>
<html>
<body>
<input type="text" pattern="[0-9]*" inputmode="numeric" id="textInput" value="007">
<button onclick="showTextValue()">Show Value</button>
<p id="textOutput"></p>
<script>
function showTextValue() {
let input = document.getElementById('textInput');
document.getElementById('textOutput').innerHTML = 'Code: ' + input.value;
}
</script>
</body>
</html>
Code: 007
Mobile Keyboard Behavior
-
iOS: Both
type="tel"andpattern="[0-9]*"display the numeric keyboard -
Android:
type="tel"works reliably;patternsupport varies by browser -
Modern approach: Add
inputmode="numeric"for better cross-platform support
Comparison
| Input Type | Preserves Leading Zeros | Mobile Numeric Keyboard | Best For |
|---|---|---|---|
type="number" |
No | Yes | Mathematical calculations |
type="tel" |
Yes | Yes | Phone numbers |
type="text" + pattern |
Yes | With inputmode="numeric" | Codes, IDs, postal codes |
Conclusion
Use type="tel" for phone numbers and type="text" with pattern="[0-9]*" and inputmode="numeric" for other numeric data that requires leading zeros. This ensures proper mobile keyboard display while preserving the complete input value.
5K+ Views
