Увеличение и уменьшения числового значения в 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
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
и вставить код для управления значениями в 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; }); });
Прикрепленный файл: example.rar (32.04 Kb)
Стилизировать .minus & .plus достаточно легко, для имитации кроссбразуерного нативного type=»number»
Спасибо очень помогли!
как в избранное добавить, а то задолбался искать постоянно этот топик =)