В данной статье мы попробуем сделать счетчик в теге 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>
comments powered by HyperComments