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

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

1 вариант: использование тега input с атрибутом number, который означает, что это числовое поле. Он имеет так же атрибуты:

min – минимальное значение;
max – максимальное значение;
step – шаг;
value – значение по умолчанию.

Код будет иметь следующий вид:

<input type="number" min="0" max="10" step="2" value="4">

В итоге получим примерно следующее.

Если вы хотите изменить начальное число или величину шага, то просто измените значение соответствующего атрибута у тега input.

Более сложный вариант с использование HTML, Bootstrap, JQuery

В итоге мы сможем получить вот такую красоту - Демо или рабочий пример ниже, можно потыкать.

Для начала подключаем необходимые для работы скрипты

JQuery:

<script src="https://code.jquery.com/jquery-3.1.1.min.js">

Boostrap:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">

Далее размечаем наш счетчик, используем Bootstrap.

<div class="input-group minus">
    <span class="input-group-btn">
        <button type="button" class="btn btn-danger btn-number"  data-type="minus" data-field="count">
                <span class="glyphicon glyphicon-minus">
        </button>
    </span>
    <input type="text" name="count" class="form-control input-number number" value="10" min="1" max="100">
    <span class="input-group-btn plus">
       <button type="button" class="btn btn-success btn-number" data-type="plus" data-field="count">
           <span class="glyphicon glyphicon-plus">
       </button>
    </span>
</div>

Мы создаем две кнопки и текстовое поле, для того, чтобы наш скрипт работал кнопки должны иметь атрибут data-field со значением count, равным значению атрибута name у текстового поля

Далее пишем обработчик:

<script>
$(document).ready(function(){
      $('.btn-number').click(function(e){
        // получаем значение атрибута data-type
        var type = $(this).attr('data-type');
        // получаем значение атрибута data-field
        var field = $(this).attr('data-field');
        // по значению атрибута data-field находим связанное текстовое поле
        var input = $('input[name ='+ field +']');
        // получаем атрибут со значением минимума
        var min = input.attr('min');
        // получаем атрибут со значением максимума
        var max = input.attr('max');
        // принимаем строку в качестве аргумента и возвращает целое число
        min =parseInt(min);
        max =parseInt(max);
        var currentVal;
        // получаем значение текстового поля
        var value = input.val();
        // если нажимаем на минус
        if(type == 'minus')
        {
        // пока значение больше минимума
            if(value>min)
            {
        // уменьшаем на 1
                currentVal = parseInt(value) - 1;
        // вызываем событие изменения текстового поля
                input.val(currentVal).change();
            }
        }
        // если нажимаем на плюс
        if(type == 'plus')
        {
        // пока значение меньше максимума
            if(value<max)
            {
        // увеличиваем на 1
                currentVal = parseInt(value) + 1;
        // вызываем событие изменения текстового поля
                input.val(currentVal).change();
            }
        }

      });
      //
      $('.input-number').change(function(){
        var min = $(this).attr('min');
        var max = $(this).attr('max');
        var val = $(this).val();
        var name = $('.input-number').attr('name');
     // если достигли минимума, отключаем кнопку минуса
        if(val == min)
        {
             $(".btn-number[data-type='minus'][data-field='"+name+"']").attr('disabled','true');
        }
        else $(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled');
     // если достигли максимума, отключаем кнопку плюса
        if(val == max)
        {
             $(".btn-number[data-type='plus'][data-field='"+name+"']").attr('disabled','true');
        }
        else $(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled');
      })
});
</script>

Демо с двумя примерами

Уменьшаем и увеличиваем значение в поле input с помощью html5 и jquery