Как сделать маску для input?

Question

[knocker83]

<input class="input" type="text" name="" value="1 — 4">

Можно сделать условие, чтобы нельзя было удалить тире ?
И также ограничение ввода. Вводить только числа, чтобы нельзя было вводить пробел или буквы

Это почти как маска jquery, только левая и правая сторона ограничена до 3 цифр

$(".input").mask("999 — 999"); - хочу сделать что-то похожее на это, но не совсем получается

Answer 1

[Андрей Токмаков]

как вариант сделайте 2 инпута прозрачных, оберните их дивом и стилизируйте его как одно поле ввода и будет Вам счастье.
Как нибудь так https://jsfiddle.net/xNPC/de4wt59g/

Comments

[Андрей Токмаков]

Добавил к ответу пример в песочнице

[Андрей Токмаков]

Так точно не сотрут Ваше тире

[knocker83]

Остановился на этом решении, но проблема в том, что пользователь должен 2 раза кликать чтобы ввести нужные данные.

[Андрей Токмаков]

knocker83: Допилите скриптом переход из поля в поле

Answer 2

[Павел Корнилов]

<input class="input" type="text" name="" value="1 — 4" onblur="if(!/.+\s*?\—/.test(this.value)) this.value= this.value.replace(/(.+)[\s\-\—](.+)/i, '$1 — $2')">

Answer 3

[Zombie42679]

Вот здесь удобно расписано i-leon.ru/udobnoe-pole-input-dlya-telefona