-2

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!

injecteer
  • 16,220
  • 3
  • 39
  • 72
  • 2
    Not possible based on the docs... You will need to use a regular input field, and write some JS to handle the formatting. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number – Chris Jul 14 '20 at 15:55
  • 1
    You may do it with some javascript hacks. – Panwen Wang Jul 14 '20 at 15:55
  • Something similar was asked and answered before: https://stackoverflow.com/questions/14650932/set-value-to-currency-in-input-type-number – Bryce Howitson Jul 14 '20 at 20:10

1 Answers1

1

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.

Bryce Howitson
  • 6,294
  • 15
  • 30
  • I started with 2 inputs. What I want is rather the optical separation of numbers inside the field, the numbers themselves shall not be changed – injecteer Jul 14 '20 at 17:03
  • You still need two fields to do that. You can still make it look like one field to the user. I'll update my answer with an example. – Bryce Howitson Jul 14 '20 at 17:46
  • no. I need a single number field for many reasons. one of the would be scrolling – injecteer Jul 14 '20 at 19:31
  • Then the answer is: You can't format a number input. If you need modify formatting and your requirement is a single input field then you should use `type=text` not `type=number` – Bryce Howitson Jul 14 '20 at 20:08
  • I was hoping to find something similar to iconified input like here https://getuikit.com/docs/form#form-and-icons, but rather in the middle of the field – injecteer Jul 14 '20 at 20:19
  • Right but notice that in the example it's not IN the input field. They're dropping the icon on top via CSS and using padding to move the text around. You can't add margin/padding to the inside an element's content. – Bryce Howitson Jul 14 '20 at 20:24