Как стилизировать input type=number?

Question

[Дмитрий]

Есть вот такой блок:


Не знаю как сделать его лучше (делаю такой блок впервые): две кнопки - и + и span между ними. Через jQuery по клику на кнопки изменять значения в span-е, а по клику на "В корзину" брать значение из span-а через .text()?

Answer 1

[iBird Rose]

лучше вместо span использовать input text. чтобы человек руками тоже мог ввести количество. а так в остальном да. все правильно. все так и делается.

Comments

[Ankhena]

Предлагаю заменить на input number и скрыть стрелки (тут недавно был вопрос как это делается). Тогда на смартфонах/планшетах при фокусе на это поле будет вылезать клавиатура с цифрами, а не обычная, с буквами.

[Алексей Струков]

Ankhena W: input number имеет одну проблему - при валидации формы пустое значение расценивается как :invalid. Лучше использовать input text с аттрибутом pattern и регулярным выражением типа [0-9]+
В этом случае клавиатура на мобильных также будет цифровая открываться.

[Ankhena]

Алексей Струков: При валидации каким способом?

Можно выставить начальное значение, 0. Потому что пустое поле и стрелочки +/- тоже выглядят не очень корректно.

[Алексей Струков]

Ankhena W: по сути есть только один кроссбраузерный способ валидации - через джаваскрипт. Способ через html не работает в ios safari. Можно выставить начальное значение конечно, но пользователь может его удалить. Лично я намучался с этим input number и забил на него до лучших времен.

[Алексей Струков]

Ankhena W: не, там валидация через html не обращает внимание на аттрибут required. А если есть специальные стили для неправильно заполненных полей (например красный бордер у инпута), то этот стиль будет применяться когда поле просто пустое. Если задать ему начальное значение, то это может сработать, но мне нужно было универсальное решение, поэтому отказался от number вообще.

[Ankhena]

Алексей Струков: Эксперимент с pattern="^[0-9]+$" - андроид, хром, клавиатуру показывает обычную, а не цифровую.

[Алексей Струков]

Ankhena W: я помню что был такой косяк. Нужен именно паттерн [0-9]*

[Ankhena]

Алексей Струков: хорошо бы еще точку и запятую туда вживить

[Алексей Струков]

Ankhena W: надо над паттерном поколдовать. Добавить внутрь квадратных скобок требуемые символы.