Обычно поля типа number, или числовые поля, используют для указания количества товара в любом интернет-магазине или для изменения неких цифровых значений (температуры, веса, количества чего-либо). Стандартный их вид зависит целиком и полностью от браузера, поэтому для их стилизации нужно задействовать обычно дополнительные элементы в разметке либо вообще заменить такое поле другими html-элементами.

Классическое поле с цифрами

Поле <input type="number"> предполагает ввод цифр, о чем вы можете сообщить пользователю в атрибуте placeholder. Он будет виден до того, как вы добавите атрибут value или нажмете на одну из стрелок или удалите существующее в поле значение. Также по умолчанию вы будете изменять значение в поле на 1, начиная с 0, если отсутствует  атрибут value.

Кроме того, можно задать дополнительные атрибуты в виде минимального (min) и максимального (max) значения и шага (step), который будет менять значение на определенную величину (по умолчанию это 1).

Атрибут required нужен для того, чтобы пользователь не забыл заполнить поле внутри формы с кнопкой типа submit. Соответствующее предупреждение о заполнении поля будет выведено перед отправкой формы.

В поле ниже использован такой код для <input type="number">:

Попробуйте изменить значения.

Предпочитаемые значения

Для полей типа number можно задать список с предпочитаемыми значениями с помощью элемента <datalist>.

Связь между input и datalist осуществляется с помощью указания в datalist id="prefer-list", а в input type="number" атрибута  list с этим id.

Давайте посмотрим, как это работает:

Валидация полей типа number

Поскольку в поле типа number могут быть только цифры, ничего другого в него ввести у вас не получится. Такой атрибут, как pattern здесь не поддерживается, т.к. в нем нет необходимости - об этом позаботится браузер.

Попробуйте ввести какие-либо буквы или символы типа $, %, & и т.п. в любом из полей выше. Получается?

Псевдоклассы :valid и :invalid

Валидацию полей типа number можно провести с помощью псевдоклассов :valid и :invalid, которые доступны для всех элементов формы. Обычно какую-либо информацию выводят в элементах, размещенных в коде до или чаще после самого поля типа number, например в <span> или <label>:

Пример вживую:

Стилизация полей типа number

Стандартная стилизация полей типа number предполагает, что вы можете указать цвет фона и текста в поле, размер шрифта, свойство border и/или outline, border-radius и т.д. Такой пример вы найдете ниже.

Здесь вы можете протестировать стили:

Отключение стрелок

Стрелки появляются при наведении на числовое поле. Отключение стрелок в полях типа number нужно в том случае, если вы хотите заменить их на свои собственные элементы для увеличения/уменьшения числовых значений. Выполняется это так:

То есть этими правилами мы говорим браузеру, что числовое поле становится текстовым и отключаем стрелки с помощью свойства display: none.

В примере ниже вы найдете наш стилизованный input, но уже без стрелок. Увеличивать/уменьшать значения можно с помощью стрелок вниз/вверх на клавиатуре.

Пример использования такой стилизации от Geoffrey Crofte.

See the Pen SMS 6 Digits One-Time-Code Input by Geoffrey Crofte (@GeoffreyCrofte) on CodePen.

Есть еще более простой способ отключить стрелки: достаточно просто добавить к элементу <input type="number"> атрибут readonly:

Проверяем:

Ключевое отличие этого способа от предыдущего заключается в том, что атрибут readonly НЕ позволяет менять значения внутри числового поля с помощью стрелок. То есть предназначение атрибута readonly только для чтения говорит о том, что изменения в нем не подразумеваются.

Используем JS-методы stepUp() и stepDown()  для изменения чисел в поле типа number

К сожалению, CSS-стили для стрелок пока нет, зато можно использовать специальные JS-методы stepUp() и stepDown() , чтобы изменить значения в числовом поле. Таким образом мы, скрыв стрелки, можем добавить свои кнопки (в примере мы будем использовать элементы <span>):

See the Pen JS arrows for type number by Elen (@ambassador) on CodePen.

Здесь атрибут readonly уже не мешает нам управлять значениями в числовом поле.

Стилизация полей типа number с заменой стандартных кнопок

В примере ниже вы найдете <input type="number">, однако кнопки в нем стилизованы уже с помощью дополнительных элементов + есть анимация "подпрыгивания" при смене значений.

See the Pen Counter on Hinges by Jon Kantner (@jkantner) on CodePen.

 

Замена полей типа number

Поле типа number можно заменить, задав вместо него некий элемент для плюса, минуса и цифры и добавив обработчики события click для plus и minus. Например, так:

See the Pen type number by Elen (@ambassador) on CodePen.

Здесь нет возможности ввести значение, т.к. нет собственно поля ввода. В разметке его заменяет обычный <span>.

Примеры стилизации и замены полей типа number

Ниже вы найдете несколько примеров различного использования числовых полей как в их стандартном виде, так и в стилизованном, а также варианты замены полей типа number другими элементами.

Использование стандартных полей для формирования размеров изображения. Автор Charles Ojukwu.

See the Pen Low Poly Background Generator by Charles Ojukwu (@cojdev)on CodePen.

Очень интересная стилизация от числовых полей от Tomasz Stryjewski.

See the Pen a knob by tomasz stryjewski (@stryju) on CodePen.

Пример использования стандартного поля типа number и дополнительных кнопок от Burlaka Dmytro. Для просмотра вам нужно сначала добавить товар в корзину кликом по кнопке "Add to Cart", а затем посмотреть корзину кликом на кнопке "Cart".

See the Pen Shopping cart JS by Burlaka Dmytro (@Dimasion) on CodePen.

Анимационная смена значений для изменения фонового цвета в body от Viesturs Marnauza.

See the Pen An animated number stepper by Viesturs Marnauza (@viestursm) on CodePen.

Стилизация числовых полей на основе разметки Bootstrap 5 от Anita.

See the Pen increment and decrement input with bootstrap 5 by Elen (@ambassador) on CodePen.

Обработка событий для поля типа number от Yair Even Or

See the Pen Input type number printed using locale by Yair Even Or (@vsync) on CodePen.

Соотношение сторон формата А4 с помощью полей типа number от Nikita Malyshev. Скрипт пригодится, если вам нужно высчитать стороны с определенным коэффициентом соотношения.

See the Pen A4 pixeal ratio calculator by Nikita Malyshev (@Niklan) on CodePen.

Пример анимационной смены значений при клике на цифры от Jon Kantner.

See the Pen Sliding Stepper by Jon Kantner (@jkantner) on CodePen.

Замена полей типа number

Замена поля типа number  может быть с анимацией, как в примере ниже (автор Prasenjit Nayak). Здесь при каждом клике происходит плавная заливка внутреннего пространства + цвет с зеленого меняется на красный, если значение увеличивается до 8 и более.

See the Pen Animated Number Spinner by Prasenjit Nayak (@StarKnightt) on CodePen.

Использование стандартный числовых полей и их замена с анимацией от Irko Palenius

Здесь используется код, основанный на Vue.js.

See the Pen Vue.js touch input by Irko Palenius (@ispal) on CodePen.

Замена числовых полей в корзине с товарами, реализованная на Vue.js. Автор OlgaKoplik.

See the Pen Vue.js Shopping Cart by Olga (@OlgaKoplik) on CodePen.

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *