Плюс и минус для поля input

Небольшой скрипт на jQuery, который при нажатии на соотвествующую кнопку, прибавляет и отнимает единичку в текстовом поле.

Также в этой теме есть несколько вариантов оформления этих кнопок.

Пример:

(вид немного отличается из-за стилей сайта)

HTML:

Где атрибут data-max-count - максимальное значение.

jQuery:

Скрипт работает таким образом, что в текстовое поле input можно вводить только цифры. Если введено некорректное значение или оно отсутствует, то в поле вставляется единица. Если введено значение больше максимального, то в поле ставится максимально возможное.

Оформление:

Во всех примерах используется jQuery приведенный выше

Предыдущий вариант с кнопкой купить:

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

Страница находится в стадии разработки
Поддержать блог Любые Ваши (пусть даже и скромные) суммы значительно повышают мотивацию развивать блог, делиться наработками и придумывать новые.

Смотрите также:

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

Ваш комментарий отправлен!

Комментарии:

  • Олег Витальевич:

    Доброго дня с наступающим всех. Что подшаманить чтобы quantity выводилось в коде html/ Допустим догнал до 10 то 10 ка и отображается на странице. Убавил 9 стало и т.д. Или вообще подскажите как натянуть на корзину данный контент.
    Понятно с учетом того что корзина обрабатывает в последствии сама.

    Ответить
    • Alexander:

      Вас тоже с наступающим!
      $input.val(count); вставляет значение в поле инпут.
      Чтобы вставить его тег my-quantity, нужно например:

      $('.my-quantity').text(count);

      Если таких тегов много (как полей в примере), то по аналогии через this и find

      Ответить
      • Олег Витальевич:

        Спасибо будем пробовать!

        Ответить
  • dumb:

    а как полученный результат (количество) дальше для обработки php передать?

    Ответить
    • Alexander:

      Как обычно, у нас есть input и его value

      Ответить
  • Павел:

    может кому понадобится, я переписал jquery код в нативный js

    // Убавляем кол-во по клику
document.querySelectorAll('.quantity_inner .bt_minus').forEach(function (element) {
	element.addEventListener('click', function(event) {
		event.preventDefault();
		let input = this.parentElement.querySelector('.quantity');
		let count = parseInt(input.value) - 1;
		count = count < 1 ? 1 : count;
		input.value = count;
	});
});

// Прибавляем кол-во по клику
document.querySelectorAll('.quantity_inner .bt_plus').forEach(function (element) {
	element.addEventListener('click', function(event) {
		event.preventDefault();
		let input = this.parentElement.querySelector('.quantity');
		let count = parseInt(input.value) + 1;
		count = count > parseInt(input.dataset.maxCount) ? parseInt(input.dataset.maxCount) : count;
		input.value = parseInt(count);
	});
});

// Убираем все лишнее и невозможное при изменении поля
document.querySelectorAll('.quantity_inner .quantity').forEach(function (element) {
	element.addEventListener("change", function(event) {
		event.preventDefault();
		if (this.value.match(/[^0-9]/g)) {
			this.value = this.value.replace(/[^0-9]/g, '');
		}
		if (this.value == "") {
			this.value = 1;
		}
		if (this.value > parseInt(this.dataset.maxCount)) {
			this.value = parseInt(this.dataset.maxCount);
		}
	});
});
    Ответить
    • Alexander:

      Спасибо, думаю многим пригодится!

      Ответить
  • Александр:

    Спасибо большое! Отлично вышло. Немного подшаманил под свой проект css и отправил в форму результат. Как там и было

    Ответить
  • Alexei:

    Подскажите, а как можно реализовать? допустим мы дошли до цифры 3 и заново начать с цифры 1, грубо говоря зациклить ввод

    Ответить
  • Владимир:

    Натянул на калькулятор так или иначе ваш же ползунок. https://atuin.ru/blog/oformlenie-polzunka-input-typerange/

    Однако как поля для ввода 1.2 и 1.3 здесь сделать так и не понял.

    Ответить
  • Владимир:

    Спасибо за крутой сайт! А как сделать чтобы 10-е значения можно было дописывать?

    Ответить
    • Alexander:

      Не совсем понял, сейчас максимум 20, это стоит в атрибуте data-max-count

      Ответить
      • Владимир:

        Ох я уж и забыл что спрашивал извиняюсь) Опять коснулось, вот такие мы... Допустим для калькулятора площади какой нибудь где вводить нужно 1,5 метра.

        Ответить
  • EvilDoom:

    А если в инпуте по умолчанию стоит 0. При нажатии на + появляется 1, а после нажимаем на - должен вернуться 0. Что в скрипте нужно поменять?

    Ответить
    • Alexander: 
      count = count < 1 ? 1 : count;
      this.value = 1;

      1 заменить на 0

      Ответить
  • SylaR:

    Красота, но только что получил *** от ментора за подобный подход

    Ответить
  • squid:

    // Убираем все лишнее и невозможное при изменении поля
    Лишнее. Достаточно <input disabled...

    Ответить
    • Alexander:

      А если нужно ввести 100 штук?

      Ответить
  • Павел:

    у кого +,- отправляют форму добавьте к <button> type="button"

    Ответить
Разделы:
Фоновая анимация на JS
  • Установка этих и любых других решений с учетом Ваших предпочтений и под дизайн Вашего сайта
    Обращайтесь:
    от 900 ₽