12.10.2017
Добавим красивые стрелки для увеличения/уменьшения числа в инпуте, например, изменение количества товаров в корзине или что-то на подобие того.
Для начала уберем стандартные стрелки. «Кстати, красивые стрелки» — это я погорячился, суть задачи в том, чтобы просто сделать какие-то отдельные от инпута стрелки, а красивыми их уже сможет сделать каждый сам себе с учетом своего видения красивого.
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]{ -moz-appearance: textfield; }
Такой примитивный HTML-код (это упрощенный код из магазина на WooCommerce)
<div class="quantity-block"> <button class="quantity-arrow-minus"> - </button> <input class="quantity-num" type="number" value="1" /> <button class="quantity-arrow-plus"> + </button> </div>
Такой примитивный JS-Скрипт с использованием jQuery:
Не забываем подключить jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Скрипт:
$(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:
See the Pen customize input[type=number] with js by Denis (@deniscreative) on CodePen.0
Комментарии (27) к “Как стилизовать стрелки для input[type=number]”
Дмитрий
Дружище! От души! Сделал по твоему шаблону ! Все работает! Только я так понял вот эта кракозября —
find(".qty");
скорее всего поиск инпута ?))Denis Creative
Все верно, я упрощал код, и забыл добавить этот класс к инпуту, сейчас обновил код в статье, теперь у инпута класс
.quantity-num
, и этот же класс используется в скрипте.Denis Creative
Я поменял код в скрипте, так что аккуратно.
Владимир
Доброго времени суток!
Все работает.
Но при нажатии на «+» — нажимаются обе кнопки и «+» и «-«.
При нажатии кнопки «-» — все норм.
Подскажите как исправить. Код не менял, вставил как копипастом.
Denis Creative
Проверьте, чтобы правильно были указаны классы для кнопок:
и, чтобы правильно были заданны переменные для этих кнопок:
Владимир
Спасибо за быстрый ответ!
Проверил, все правильно указано.
Вот мой код, может вы увидите где ошибка:
Владимир
Еще заметил момент у меня — при клике на поле ввода мышкой, нажимается также и кнопка «-» каждый раз…
Очень понравилась ваша реализация внешнего вида этих кнопок, но эти моменты хочется исправить.
Denis Creative
Попробуйте выложить ваш код на сайте https://codepen.io/ будет видно наглядно в том числе, со стилями
Владимир
Хорошо. Уже завтра тогда.
Владимир
Добрый день.
Вот выложил на codeopen свой код.
Но так нет проблемы — одновременное нажатие кнопки «минус», когда нажимаешь кнопку «плюс».
Но зато появилась новая трабла (на сайте у меня тоже она есть) — если таких инпутов несколько, то при нажатии на «плюс» одного инпута — срабатывают все.
Помогите разобраться, пожалуйста.
https://codepen.io/vovaent/pen/bMOxYG/
Denis Creative
Чтобы кнопки работали для каждой формы отдельно, как вариант можно сделать так — https://codepen.io/deniscreative/pen/bMOmGe
В функциях
quantityMinus()
иquantityPlus()
переменная числового поля$quantityNum
задается только возле кнопки, на которую нажали:А что там у вас с одновременным нажатием на две кнопки я не знаю, на codepen все нормально, значит где-то что-то не так у вас с классами или скриптом, или стилями.
Владимир
Понял. Спасибо за помощь. Буду разбираться.
Владимир
Я вас еще не замучал вопросами?))
Ваш код помог, с несколькими инпутами на странице. Но заметил, что после первого клика не изманяется цифра, а только после второго начинает плюсовать единичку.
Поможете?
Владимир
А еще, когда наклацал, например, 7, потом наклацал снова до единицы, и начинаешь опять плюсовать — то выводит 8, 9 и т.д. Тоесть плюсует к 7, а не к 1.
Denis Creative
Исправил код, должен работать — https://codepen.io/deniscreative/pen/bMOmGe
Владимир
Благодарю Вас!
Все работает!
Осталась, конечно, индивидуальная проблема в том, что при кликах на «+» происходит анимация нажатия и «-» одновременно.
В codepen.io такой проблемы нет. Может у меня какие-то скрипты друг с другом конфликтуют…
Их можно как-то проверить на совместимость, кроме консоли в браузере?
Denis Creative
Или дайте ссылку или отключайте скрипты по очереди, проверяйте
Владимир
В исходном примере для одного инпута, нормально минусует и плюсует.
Илья
Сделал специальный плагин под это numberPlugin всё расписано на русском как подключать, применён уже не на одном реальном сайте есть на github https://github.com/igrok666/numberPlugin
Denis Creative
Чем этот плагин лучше кода описанного в статье?
По мне, так плагин совсем не гибкий и не очень удобный, под свой дизайн нужно много чего менять.
Илья
я не говорю что он лучше, просто сделал может кому то понадобится, а то что он ещё не очень гибкий ну над этим работаю ещё в свободное время, а под дизайн ты любой плагин будешь менять, мне ещё не разу не попадалось такого что сразу плагин подходил под макет
No48
JS можно было б и по универсальнее сделать.
Да и батоны закрыть от срабатывания в формах…
Как-то так:
Denis Creative
По поводу «батоны закрыть от срабатывания в формах» согласен.
По поводу «сделать универсальнее», в вашем коде появилось много операторов
if
, и мне он не кажется сильно универсальным.В вашем примере, при количестве равном «0», кнопки перестанут работать.
Алексей
При первом клике по кнопку + или — не срабатывает.
При нажатии на кнопку +, а потом на кнопку — ,минус сначала прибавляет значение, а потом начинает убавлять.
Denis Creative
Все работает правильно, в данном примере не может быть число менее 1, так как пример сделан для интернет-магазина для карточки товара.
Немного изменив код, можно допустить и минусовые значения.
Сергей
А если будет несколько таких элементов в форме? Тогда при клике на на разный input значение будет меняться только у одного input.
Denis Creative
Ну так вам ничего не мешает немного подправить код под свои задачи. В статье просто приведен пример, который можно уже стилизовать и подстраивать под свои нужды, как захочется.