Html input type number style

Поле для ввода чисел:

name имя ключа параметра value значение ключа параметра, которое может содержать: цифры «0-9», один плюс «+» или минус «-», один символ «e» или «E», одну точку «.». Можно ввести буквы, но форма не будет отправлена при нажатии на кнопку submit , а покажет сообщение об ошибке. Чаще всего не задаётся. Пользователь может его изменить, если не указаны атрибуты readonly и disabled . readonly заблокировано изменение пользователем disabled заблокированы доступ, изменение пользователем и передача данных текущего параметра required поле не может быть пустым step
step=20
step=any шаг изменения, который может быть положительным целым или дробным числом. Значение value кратно значению step , то есть делится на него без остатка. Пример разрешённых значений value при step=»20″ : …, -40, -20, 0, 20, 40, …. По умолчанию равен 1 . То есть покажет ошибку, если ввести десятичную дробь. Для того, чтобы убрать ограничения, нужно присвоить any . min минимально возможное значение value , необходимое для отправки формы max максимально возможное значение value , необходимое для отправки формы placeholder подсказка-заглушка title всплывающая подсказка при наведении курсора мышки autocomplete автозаполнение. Можно его отключить или сделать более конкретизированным. list список рекомендованных значений autofocus фокус поля (то есть период между щелчком по элементу и щелчком вне элемента) получен при загрузке документа

Поле не подходит для текстовых строк, состоящих из 16 и более цифр, например, номера пластиковой карты, так как длинные числа от 9007199254740991 могут округляться.

Количество товара

1. увеличение и уменьшение значения числового поля с помощью кнопок пошагового изменения,
2. сообщение об ошибки при вводе букв и дробных чисел,
3. минимальное значение 1.

Чётные положительные целые числа

Нечётные положительные целые числа

Источник

Input type number

В HTML5 появилось специальное поле с атрибутом type=»number» для вода чисел. Рассмотрим его возможности.

Для поля доступны следующие атрибуты:

Атрибут	Описание
step	Шаг изменения значения
max	Максимальное значение
min	Минимальное значение
placeholder	Подсказка
readonly	Только для чтения
disabled	Заблокирован
list	Связка со списком опций datalist по id
required	Обязательный для заполнения

Шаг изменения

Атрибут step=»1″ задает на сколько будет увеличиваться или уменьшаться значение в поле. Может быть как целым (10) так и дробным (0.1).

Пример:

Минимальное значение

Атрибут min=»1″ задает минимально возможное значение value . Это значение должно быть меньше или равно значению max . Может быть целым, отрицательным или дробным.

Пример:

Максимальное значение

Атрибут max=»100″ задает максимально возможное значение value .

Пример:

Опции по умолчанию

У поля есть возможность задать список с рекомендуемыми значениями с помощью элемента .

Пример:

Валидация

Если указать атрибут required , то при отправки формы будет проверятся заполнено поле или нет, а также превышение введенного значения value в атрибутах min и max .

Проверить значение регулярным выражением с помощью атрибута pattern не получится, т.к. он не поддерживается.

Пример:

Также доступны CSS псевдо свойства :invalid и :valid , с помощью них можно применить стили к неправильно заполненному полю.

input[type="number"]:invalid+span:after < content: '✖'; padding-left: 5px; color: red; >input[type="number"]:valid+span:after

Источник

Input type number стилизация

Сегодня рассмотрим как можно стилизовать input type number. А если быть точным, то как его создать таким, каким душе угодно.

.input-number < position: relative; >.input-number__input < border-radius: 7px; padding-left: 10px; padding-right: 20px; border: 1px solid #d0c4db; outline: none; width: 77px; height: 33px; transition: .2s; >.input-number:hover .input-number__input, .input-number:focus .input-number__input < border-color: #888; >.input-number__top < width: 0px; border: 5px solid transparent; border-bottom: 7px solid #d0c4db; position: absolute; top: 5%; right: 5px; cursor: pointer; transition: .2s; >.input-number__top:hover < border-bottom-color: #888; >.input-number__bottom < width: 0px; border: 5px solid transparent; border-top: 7px solid #d0c4db; position: absolute; top: 60%; right: 5px; cursor: pointer; transition: .2s; >.input-number__bottom:hover

jQuery(($) => < // Уменьшаем на 1 $(document).on("click", ".inputTN__bottom", function () < let total = $(this).prev().prev(); if (total.val() >1) < total.val(+total.val() - 1); >>); // Увеличиваем на 1 $(document).on("click", ".inputTN__top", function () < let total = $(this).prev(); total.val(+total.val() + 1); >); // Запрещаем ввод текста $(document).on("input", ".input-number__input", function () < if (this.value.match(/[^0-9]/g)) < this.value = this.value.replace(/[^0-9]/g, ""); >>); // Запрещаем ввод текста js // document.querySelectorAll(".inputTN__input").forEach(function (el) < // el.addEventListener("input", function () < // this.value = this.value.replace(/[^d]/g, ""); // >); // >); >);

Обратите внимание, должен быть подключен jQuery

Input type number — стрелки по бокам

Структура блока с input type number.

/* input type number */ .input-number < display: flex; align-items: center; background: #FFFFFF; border: 1px solid #E5E8EE; box-sizing: border-box; border-radius: 6px; color: #424348; font-size: 14px; text-align: center; width: calc(33px * 3); >.input-number__input < background: #E5E8EE; width: 32px; height: 32px; border: none; padding: 8px; text-align: center; >.input-number__minus, .input-number__plus < width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; >/* /input type number */

jQuery(($) => < // Уменьшаем на 1 $(document).on("click", ".input-number__minus", function () < let total = $(this).next(); if (total.val() >1) < total.val(+total.val() - 1); >>); // Увеличиваем на 1 $(document).on("click", ".input-number__plus", function () < let total = $(this).prev(); total.val(+total.val() + 1); >); // Запрещаем ввод текста document.querySelectorAll('.input-number__input').forEach(function (el) < el.addEventListener('keydown', function (event) < // Разрешаем: backspace, delete, tab if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || // Ctrl+A (event.keyCode == 65 && event.ctrlKey === true) || // ← → (event.keyCode >= 35 && event.keyCode else < // Только цифры if ((event.keyCode < 48 || event.keyCode >57) && (event.keyCode < 96 || event.keyCode >105)) < event.preventDefault(); >> >); >); >);

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

Полезные ссылки

• Шпаргалка по использованию jQuery
• Выполнение js в зависимости от ширины экрана ссылка
• Статья про валидацию input.
• Стилизация input type file.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Статьи из данной категории:

Комментарии ( 1 )

 // input type number const total = document.querySelector('.input-number__input'), min = 1, max = 99; // Уменьшаем на 1 document.querySelector('.input-number__minus').addEventListener('click', () => < if (total.value >min) < total.value = +total.value - 1; >>); // Увеличиваем на 1 document.querySelector('.input-number__plus').addEventListener('click', () => < if (total.value < max) < total.value = +total.value + 1; >>); // Запрещаем ввод текста document.querySelectorAll('.input-number__input').forEach(function(el) < el.addEventListener('input', function() < this.value = this.value.replace(/[^d]/g, ''); >); >); 

Источник

Как стилизовать стрелки для input[type=number]

Добавим красивые стрелки для увеличения/уменьшения числа в инпуте, например, изменение количества товаров в корзине или что-то на подобие того.

Для начала уберем стандартные стрелки. «Кстати, красивые стрелки» — это я погорячился, суть задачи в том, чтобы просто сделать какие-то отдельные от инпута стрелки, а красивыми их уже сможет сделать каждый сам себе с учетом своего видения красивого.

CSS-стили для input[type=number]

/* Для Chrome */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button < -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; >/* Для Firefox */ input[type=number]

Такой примитивный HTML-код (это упрощенный код из магазина на WooCommerce)

Такой примитивный JS-Скрипт с использованием jQuery:

Не забываем подключить jQuery

$(function() < (function quantityProducts() < var $quantityArrowMinus = $(".quantity-arrow-minus"); var $quantityArrowPlus = $(".quantity-arrow-plus"); var $quantityNum = $(".quantity-num"); $quantityArrowMinus.click(quantityMinus); $quantityArrowPlus.click(quantityPlus); function quantityMinus() < if ($quantityNum.val() >1) < $quantityNum.val(+$quantityNum.val() - 1); >> function quantityPlus() < $quantityNum.val(+$quantityNum.val() + 1); >>)(); >);

Рабочий пример на CodePen:

В одном из проектов возле меню выводились небольшие иконки в формате svg, и нужно, чтобы…

Простые кнопки поделиться в социальных сетях без использования сторонних плагинов и скриптов, используется прямая ссылка…

Самый простой и удобный таймер обратного отсчета HTML CSS Javascript Указываем дату окончания работы таймера…

Форма обратной связи с прикреплением файла (attach) Самый простой внешний вид формы обратной связи с…

Источник