HTML настраиваемое форматирование в input type = number

Question

Я хочу добавить пользовательский пробел или другой символ в <input type="number"/>.

Я хочу разделить число этим, чтобы он выглядел так:

[ 2222 - 111 ]

или

[ 2222   111 ]

Любые (CSS) хаки приветствуются!

Answer 1

input type="number" ожидает целое число, поэтому вы не можете выполнять какое-либо форматирование.

Из Mozilla

Важно: имейте в виду, что логически , вы не сможете вводить символы внутри числового ввода, кроме цифр.

После добавления da sh или пробела он становится строкой, а не числом, поэтому используется другой тип ввода. требуется.

Чтобы смоделировать ваш пример с вводом чисел, я бы предложил несколько полей ввода и HTML / CSS для стилизации.

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>

Изменить: добавлен пример. Вы также можете удалить стрелки диапазона и добавить тонкости, такие как захват, если 4 цифры введены в первое поле и переместите фокус на второе поле, чтобы пользователи могли просто вводить текст.