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

В продолжение предыдущей статьи сейчас мы научимся плавно увеличивать или уменьшать значение поля input. Плавно - это значит изменять значение на 1 по каждому клику. Как мы это сделаем? Очень просто.

Напишем простенький скрипт, который будет делать всю работу за нас. Создадим разметку и нанесем стили. Готовы? Тогда поехали.

Для начала создадим разметку. Она выглядит очень просто:

<div class="amount">
    <span class="down">-</span>
    <input type="text" value="1" />
    <span class="up">+</span>
</div>

Общий контейнер, поле ввода с начальным значением 1, элемент для уменьшения количества и элемент для увеличения количества - вот и все, что нам потребуется.

Напишем скрипт:

	$(document).ready(function() {
		$('.down').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;
		});
		$('.up').click(function () {
			var $input = $(this).parent().find('input');
			$input.val(parseInt($input.val()) + 1);
			$input.change();
			return false;
		});
	});

Что тут? Тоже до ужаса просто. При клике по нашим элементам (с классом up для увеличения и down для уменьшения), мы изменяем значение поля ввода на единицу больше или меньше. Плюс присутствует проверка - если значение поля ввода уже равно 1, то оно не может быть уменьшено. Вот и все.

Не забывайте, что для работы этого скрипта необходимо подключить библиотеку jquery.

Для красоты зададим стили:

.amount {
	width:200px;
	margin:100px auto;
}
.amount span {
	display:inline-block;
	width:20px;
	height:20px;
	background:#ededed;
	cursor:pointer;
	text-align:center;
}
.amount span:hover {
	background:#dfdfdf;
}
.amount input {
	width:30px;
	text-align:center;
}

Теперь наша формочка выглядит достаточно симпатично.

Полный код страницы, может кому-то будет полезен:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
	$(document).ready(function() {
		$('.down').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;
		});
		$('.up').click(function () {
			var $input = $(this).parent().find('input');
			$input.val(parseInt($input.val()) + 1);
			$input.change();
			return false;
		});
	});
</script>
<style>
.amount {
	width:200px;
	margin:100px auto;
}
.amount span {
	display:inline-block;
	width:20px;
	height:20px;
	background:#ededed;
	cursor:pointer;
	text-align:center;
}
.amount span:hover {
	background:#dfdfdf;
}
.amount input {
	width:30px;
	text-align:center;
}
</style>
</head>
<body>
<div class="amount">
	<span class="down">-</span>
    <input type="text" value="1" />
	<span class="up">+</span>
</div>
</body>
</html>

26.03.17

Ссылка на статью:

https://webkab.ru/uvelichit-ili-umenshit-znachenie-input/