Я хотел бы знать, можно ли использовать CSS для форматирования визуального представления числа в поле ввода (текст/tel). Но не пропускайте символы в конец.Формат номера CSS
Пример: (XXX) XXX-XXXX Где x - любое число.
Я хотел бы перейти к db XXXXXXXXXX, но пользователь видит на экране формат, поэтому, если они набирают 1231231234, это поле будет отображаться.
(123) 123-1234
Любые идеи, только с помощью CSS?
<span>(</span><input name='area-code' type='number' lenght='3'><span>)<span><input name='first-three'><span>-</span><input name='last-four'>
и т.д. увидеть эту скрипку https://jsfiddle.net/tqnfbtxj/
Используя чистый CSS, вы можете использовать: before и: после селектора в CSS2 или :: before, :: после селектора в CSS3 Подробнее here. Но он имеет проблемы совместимости браузера (IE 8.0 и выше). И это невозможно показать в одном текстовом поле. Поэтому чистого CSS-решения будет недостаточно. Это не совсем ограничение CSS, потому что CSS предназначен для презентации, форматирования и отображения. Это не предназначено для манипуляций. Эта работа для JavaScript. Одним из решений может быть то, что вы используете 2 поля. Одно отображаемое текстовое поле и другое скрытое поле. Отображаемое текстовое поле будет вводиться пользователем, и вы можете отформатировать его с помощью кода JavaScript в событии изменения текста. Скрытое поле будет добавлено с использованием пользовательского ввода без форматирования. Это всего лишь один из многих способов форматирования.
CSS не может делать, что вам нужно JQuery, чтобы получить такой эффект .. –
@KheemaPandey Скажем JavaScript, не Jquery, хорошо? – arkascha
Зачем писать 100 строк кодов, когда вы можете достичь целей, просто написав несколько строк кода. ?? проверьте этот ДЕМО. http://jsfiddle.net/hnbx4/1/ –