ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Увеличить или уменьшить цифры в поле input

Увеличить или уменьшить цифры в поле input

Увеличить или уменьшить цифры в поле input
В статье представлена рейтинг на увеличение или уменьшение значения в поле input при помощи кнопок, что осуществляется при клике на плюс и минус. Где будет востребован на многих сайтах или тематических страницах. Это безусловно интернет магазины, что под товар прописываем рейтинг, для потенциального покупателя будет иметь значение в плане покупке. Также может пригодиться на любой площадке, где вы продаете материал или просто оцениваете товар, который может быть в плане скриптов для сайта или написанная статья, где указания количества единиц будет иметь свое значение от пользователей.

Остается поставить по месту с последствием настройки, так как здесь только представлен оформление дизайна под заданные кнопки, где по центр идет небольшое окно для вывода значение цифр. Где теперь функционал на увеличение рейтинга и также уменьшения на числовое значение в input, которое производится с нажатием на кнопки плюс и минус. При проверки по работе, то здесь все значение идут под определенное значение, где можно подсчитать покупки или выставить другой показатель, под рейтинг не он только по конструкции подходит, и не более.

Увеличить и уменьшить значение в поле input

Установка:

Устанавливаем библиотеку:

Скрипт input плюс минус

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTML

Код
<div class="agormleniye_kunopok">  
  <button class="minusovka">
  <svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
  </button>
  <input type="text" value="1" size="2" class="quantity" data-max-count="20" />
  <button class="plyusovka">
  <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
  </button>
</div>

CSS

Код
.agormleniye_kunopok * {
  box-sizing: border-box;  
}  
.agormleniye_kunopok {
  display: flex;
  justify-content: center;
}  
.agormleniye_kunopok .minusovka, .agormleniye_kunopok .plyusovka, .agormleniye_kunopok .quantity {
  color: #bdd5e8;
  height: 38px;
  width: 38px;
  padding: 0;
  margin: 6px 1px;
  border-radius: 8px;
  border: 2px solid #bfceda;
  background: #275d8c;
  cursor: pointer;
  outline: 0;
  box-shadow: 0 2px 2px rgb(27 27 27 / 20%), 0 4px 2px rgb(35 35 35 / 20%);
}
.agormleniye_kunopok .quantity {
  width: 50px;
  text-align: center;
  font-size: 22px;
  color: #FFF;
}
.agormleniye_kunopok .minusovka svg,
.agormleniye_kunopok .plyusovka svg {
  stroke: #BFE2FF;
  stroke-width: 4;
  transition: 0.5s;
  margin: 4px;
}  
.agormleniye_kunopok .minusovka:hover svg,
.agormleniye_kunopok .plyusovka:hover svg {
  stroke: #FFF;
}

JS

Код
// Убавляем кол-во по клику
  $('.agormleniye_kunopok .minusovka').click(function() {
  let $input = $(this).parent().find('.quantity');
  let count = parseInt($input.val()) - 1;
  count = count < 1 ? 1 : count;
  $input.val(count);
});
// Прибавляем кол-во по клику
$('.agormleniye_kunopok .plyusovka').click(function() {
  let $input = $(this).parent().find('.quantity');
  let count = parseInt($input.val()) + 1;
  count = count > parseInt($input.data('max-count')) ? parseInt($input.data('max-count')) : count;
  $input.val(parseInt(count));
});  
// Убираем все лишнее и невозможное при изменении поля
$('.agormleniye_kunopok .quantity').bind("change keyup input click", function() {
  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).data('max-count'))) {
  this.value = parseInt($(this).data('max-count'));
  }  
});

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

На этом установочный процесс первого рейтинга завершен.

Демонстрация

Второй вариант на интернет магазин

Увеличение и уменьшения числового значения в input

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

HTML

Код
<div class="povatekesa_knopki">  
  <button class="stavim_minusinsk">
  <svg viewBox="0 0 24 24" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
  </button>
  <input type="text" value="1" size="2" class="gukesanda" data-max-count="20" />
  <button class="stavim_plyusinsk">
  <svg viewBox="0 0 24 24" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
  </button>
  <button class="sanulad">
  <svg viewBox="0 0 24 24"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
  </button>  
</div>

CSS

Код
.povatekesa_knopki * {
  box-sizing: border-box;  
}  
.povatekesa_knopki {
  display: inline-flex;
  border-radius: 26px;
  border: 4px solid #337AB7;
  position: relative;
  background: #FFF;
  z-index: 1;
}  
.povatekesa_knopki .stavim_minusinsk,
.povatekesa_knopki .stavim_plyusinsk,
.povatekesa_knopki .sanulad,
.povatekesa_knopki .gukesanda {
  height: 40px;
  width: 40px;
  padding: 0;
  border: 0;
  margin: 0;
  background: #FFF;
  cursor: pointer;
  outline: 0;
  border-radius: 26px;
}
.povatekesa_knopki .sanulad {
  background: #2b5a84;
  width: 90px;
  height: 48px;
  position: absolute;
  right: -70px;
  top: -4px;
  z-index: -1;
  border-radius: 0 26px 26px 0;
  border: 2px solid #2772b3;
}
.povatekesa_knopki .gukesanda {
  width: 52px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: #515477;
}
.povatekesa_knopki .stavim_minusinsk svg,
.povatekesa_knopki .stavim_plyusinsk svg,
.povatekesa_knopki .sanulad svg {
  stroke: #337AB7;
  stroke-width: 4;
  transition: 0.5s;
  margin: 10px;
  fill: none;
  height: 20px;
  width: 20px;
}  
.povatekesa_knopki .sanulad svg {
  stroke: #BFE2FF;
  position: relative;
  left: 6px;
}  
.povatekesa_knopki .sanulad:hover svg {
  stroke: #FFF;
}
.povatekesa_knopki .stavim_minusinsk:hover svg,
.povatekesa_knopki .stavim_plyusinsk:hover svg {
  stroke: #000;
}

JS

Код
// Убавляем кол-во по клику
  $('.povatekesa_knopki .stavim_minusinsk').click(function() {
  let $input = $(this).parent().find('.gukesanda');
  let count = parseInt($input.val()) - 1;
  count = count < 1 ? 1 : count;
  $input.val(count);
});
// Прибавляем кол-во по клику
$('.povatekesa_knopki .stavim_plyusinsk').click(function() {
  let $input = $(this).parent().find('.gukesanda');
  let count = parseInt($input.val()) + 1;
  count = count > parseInt($input.data('max-count')) ? parseInt($input.data('max-count')) : count;
  $input.val(parseInt(count));
});  
// Убираем все лишнее и невозможное при изменении поля
$('.povatekesa_knopki .gukesanda').bind("change keyup input click", function() {
  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).data('max-count'))) {
  this.value = parseInt($(this).data('max-count'));
  }

Теперь можно красиво все оформить под тематическое наклонение сайта, где под интернет магазин есть возможность поставить корзинку, а под простой материал оставить только циферблат, на котором остается цифра, что соответствует кликам.

Демонстрация
Источник: Atuin.ru
11 Ноября 2020 Загрузок: 1 Просмотров: 2334 Комментариев: (0)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 0
Войдите:
avatar