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

Увеличение и уменьшения числового значения в input нажатием на кнопки плюс и минус.

1. Способ type="number"

Самый простой указать type="number", но этот способ не все браузеры поддерживают, и в этом случае невозможно стилизация.

<input type="number" value="1"/>

2. Способ используя jquery

Надо создать блок с кнопочками навигации и самим input. При необходимость символы плюса и минуса можно заменить на любые стилизированные элементы.

<div class="number">
 <span class="minus">-</span>
 <input type="text" value="1"/>
 <span class="plus">+</span>
</div>

В шапке прописать обращение к jquery
и вставить код для управления значениями в input

$(document).ready(function() {
 $('.minus').click(function () {
 var $input = $(this).parent().find('input');
 var count = parseInt($input.val()) - 1;
 count = count < 1 ? 1 : count;
 $input.val(count);
 $input.change();
 return false;
 });
 $('.plus').click(function () {
 var $input = $(this).parent().find('input');
 $input.val(parseInt($input.val()) + 1);
 $input.change();
 return false;
 });
});






Скачать файл: Исходники [32,04 Kb] (cкачиваний: 3)

скачать dle 11.3
Добавить комментарий

Оставить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив