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

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

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

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

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

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

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

Рекомендую к прочтению:

Дружище! От души! Сделал по твоему шаблону ! Все работает! Только я так понял вот эта кракозября – find(".qty"); скорее всего поиск инпута ?))

Все верно, я упрощал код, и забыл добавить этот класс к инпуту, сейчас обновил код в статье, теперь у инпута класс .quantity-num , и этот же класс используется в скрипте.

Я поменял код в скрипте, так что аккуратно.

Доброго времени суток! Все работает. Но при нажатии на “+” – нажимаются обе кнопки и “+” и “-“. При нажатии кнопки “-” – все норм. Подскажите как исправить. Код не менял, вставил как копипастом.

Проверьте, чтобы правильно были указаны классы для кнопок:

и, чтобы правильно были заданны переменные для этих кнопок:

Спасибо за быстрый ответ! Проверил, все правильно указано. Вот мой код, может вы увидите где ошибка:

Еще заметил момент у меня – при клике на поле ввода мышкой, нажимается также и кнопка “-” каждый раз… Очень понравилась ваша реализация внешнего вида этих кнопок, но эти моменты хочется исправить.

Попробуйте выложить ваш код на сайте https://codepen.io/ будет видно наглядно в том числе, со стилями

Хорошо. Уже завтра тогда.

Добрый день. Вот выложил на codeopen свой код. Но так нет проблемы – одновременное нажатие кнопки “минус”, когда нажимаешь кнопку “плюс”. Но зато появилась новая трабла (на сайте у меня тоже она есть) – если таких инпутов несколько, то при нажатии на “плюс” одного инпута – срабатывают все. Помогите разобраться, пожалуйста. https://codepen.io/vovaent/pen/bMOxYG/

Чтобы кнопки работали для каждой формы отдельно, как вариант можно сделать так – https://codepen.io/deniscreative/pen/bMOmGe

В функциях quantityMinus() и quantityPlus() переменная числового поля $quantityNum задается только возле кнопки, на которую нажали:

А что там у вас с одновременным нажатием на две кнопки я не знаю, на codepen все нормально, значит где-то что-то не так у вас с классами или скриптом, или стилями.

Понял. Спасибо за помощь. Буду разбираться.

Я вас еще не замучал вопросами?)) Ваш код помог, с несколькими инпутами на странице. Но заметил, что после первого клика не изманяется цифра, а только после второго начинает плюсовать единичку. Поможете?

Чтобы кнопки работали для каждой формы отдельно, как вариант можно сделать так:

А еще, когда наклацал, например, 7, потом наклацал снова до единицы, и начинаешь опять плюсовать – то выводит 8, 9 и т.д. Тоесть плюсует к 7, а не к 1.

Благодарю Вас! Все работает! Осталась, конечно, индивидуальная проблема в том, что при кликах на “+” происходит анимация нажатия и “-” одновременно. В codepen.io такой проблемы нет. Может у меня какие-то скрипты друг с другом конфликтуют… Их можно как-то проверить на совместимость, кроме консоли в браузере?

Или дайте ссылку или отключайте скрипты по очереди, проверяйте

В исходном примере для одного инпута, нормально минусует и плюсует.

Сделал специальный плагин под это numberPlugin всё расписано на русском как подключать, применён уже не на одном реальном сайте есть на github https://github.com/igrok666/numberPlugin

Чем этот плагин лучше кода описанного в статье? По мне, так плагин совсем не гибкий и не очень удобный, под свой дизайн нужно много чего менять.

я не говорю что он лучше, просто сделал может кому то понадобится, а то что он ещё не очень гибкий ну над этим работаю ещё в свободное время, а под дизайн ты любой плагин будешь менять, мне ещё не разу не попадалось такого что сразу плагин подходил под макет

JS можно было б и по универсальнее сделать. Да и батоны закрыть от срабатывания в формах… Как-то так:

По поводу “батоны закрыть от срабатывания в формах” согласен. По поводу “сделать универсальнее”, в вашем коде появилось много операторов if , и мне он не кажется сильно универсальным. В вашем примере, при количестве равном “0”, кнопки перестанут работать.

При первом клике по кнопку + или – не срабатывает. При нажатии на кнопку +, а потом на кнопку – ,минус сначала прибавляет значение, а потом начинает убавлять.

Все работает правильно, в данном примере не может быть число менее 1, так как пример сделан для интернет-магазина для карточки товара. Немного изменив код, можно допустить и минусовые значения.

А если будет несколько таких элементов в форме? Тогда при клике на на разный input значение будет меняться только у одного input.

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

Добрый день! Подскажите в чем может быть проблема. Все скопировал и поставил как нужно, скрипт работает отлично в каталоге, но как только я добавляю товар в корзину и перехожу туда чтобы изменить количество товаров, то все ломается, значение не меняется

Скорее всего там другие классы используются, или скрипт не подключается на странице Корзины, проверьте.

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