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
Комментарии (18) к “Как стилизовать стрелки для input[type=number]”
Дмитрий
Дружище! От души! Сделал по твоему шаблону ! Все работает! Только я так понял вот эта кракозября —
find(".qty");скорее всего поиск инпута ?))Denis Creative
Все верно, я упрощал код, и забыл добавить этот класс к инпуту, сейчас обновил код в статье, теперь у инпута класс
.quantity-num, и этот же класс используется в скрипте.Denis Creative
Я поменял код в скрипте, так что аккуратно.
Владимир
Доброго времени суток!
Все работает.
Но при нажатии на «+» — нажимаются обе кнопки и «+» и «-«.
При нажатии кнопки «-» — все норм.
Подскажите как исправить. Код не менял, вставил как копипастом.
Denis Creative
Проверьте, чтобы правильно были указаны классы для кнопок:
и, чтобы правильно были заданны переменные для этих кнопок:
var $quantityArrowMinus = $(".quantity-arrow-minus"); var $quantityArrowPlus = $(".quantity-arrow-plus");Владимир
Спасибо за быстрый ответ!
Проверил, все правильно указано.
Вот мой код, может вы увидите где ошибка:
$(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); } })(); });Владимир
Еще заметил момент у меня — при клике на поле ввода мышкой, нажимается также и кнопка «-» каждый раз…
Очень понравилась ваша реализация внешнего вида этих кнопок, но эти моменты хочется исправить.
Denis Creative
Попробуйте выложить ваш код на сайте https://codepen.io/ будет видно наглядно в том числе, со стилями
Владимир
Хорошо. Уже завтра тогда.
Владимир
Добрый день.
Вот выложил на codeopen свой код.
Но так нет проблемы — одновременное нажатие кнопки «минус», когда нажимаешь кнопку «плюс».
Но зато появилась новая трабла (на сайте у меня тоже она есть) — если таких инпутов несколько, то при нажатии на «плюс» одного инпута — срабатывают все.
Помогите разобраться, пожалуйста.
https://codepen.io/vovaent/pen/bMOxYG/
Denis Creative
Чтобы кнопки работали для каждой формы отдельно, как вариант можно сделать так — https://codepen.io/deniscreative/pen/bMOmGe
В функциях
quantityMinus()иquantityPlus()переменная числового поля$quantityNumзадается только возле кнопки, на которую нажали:var $quantityNum = $(this).siblings('.quantity-num');А что там у вас с одновременным нажатием на две кнопки я не знаю, на codepen все нормально, значит где-то что-то не так у вас с классами или скриптом, или стилями.
Владимир
Понял. Спасибо за помощь. Буду разбираться.
Владимир
Я вас еще не замучал вопросами?))
Ваш код помог, с несколькими инпутами на странице. Но заметил, что после первого клика не изманяется цифра, а только после второго начинает плюсовать единичку.
Поможете?
Владимир
А еще, когда наклацал, например, 7, потом наклацал снова до единицы, и начинаешь опять плюсовать — то выводит 8, 9 и т.д. Тоесть плюсует к 7, а не к 1.
Denis Creative
Исправил код, должен работать — https://codepen.io/deniscreative/pen/bMOmGe
Владимир
Благодарю Вас!
Все работает!
Осталась, конечно, индивидуальная проблема в том, что при кликах на «+» происходит анимация нажатия и «-» одновременно.
В codepen.io такой проблемы нет. Может у меня какие-то скрипты друг с другом конфликтуют…
Их можно как-то проверить на совместимость, кроме консоли в браузере?
Denis Creative
Или дайте ссылку или отключайте скрипты по очереди, проверяйте
Владимир
В исходном примере для одного инпута, нормально минусует и плюсует.