I want to add a custom whitespace or other character into <input type="number"/>
.
I want to separate the number by that, so it looks like:
[ 2222 - 111 ]
or
[ 2222 111 ]
Any (CSS) hacks are highly appreciated!
I want to add a custom whitespace or other character into <input type="number"/>
.
I want to separate the number by that, so it looks like:
[ 2222 - 111 ]
or
[ 2222 111 ]
Any (CSS) hacks are highly appreciated!
input type="number"
is expecting an integer so you can't do any formatting.
From Mozilla
Important: Bear in mind that, logically, you should not be able to enter characters inside a number input other than numbers.
Once you add a dash or space it becomes a string and not a number so different type of input is required.
To simulate your example with a number input, I would suggest multiple input fields and HTML/CSS for styling.
span {
display: inline-block;
font-size: 16px;
padding: 10px;
margin: 30px;
border: 1px solid #aaa;
border-radius: 3px;
}
input {
border: 0 none transparent;
background: none;
max-width: 60px;
font-size: 16px;
letter-spacing: 2px
}
input:focus {
outline: none;
}
<span class="myRange">
<input type="number" id="no1" max="9999" tabindex="1" placeholder="####" /> -
<input type="number" id="no2" max="999" tab-index="2" placeholder="###"/>
</span>
Edit: Added example. You can also remove the range arrows and add niceties like catching if 4 digits are entered into the first field and moving the focus to the second field so users can just type through.