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

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

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

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

99

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

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

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

получиться
100
В шапке прописать обращение к 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)

Оценить:|1
  
Комментировать
Раздел: JavaScript    
Просмотров: 12906
Комментариев (3)
  1. Sidoruk-SV
    27.06.2012 в 11:17

    Стилизировать .minus & .plus достаточно легко, для имитации кроссбразуерного нативного type=»number»

  2. aleks1
    11.12.2012 в 22:12

    Спасибо очень помогли!

  3. Xap4o
    Роман [Xap4o]
    10.06.2013 в 08:28

    как в избранное добавить, а то задолбался искать постоянно этот топик =)

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