Поле для выбора количества товаров

09.02.2021

11394

Т.к. поле Input type number не подходит для выбора количества товаров из-за его трудной стилизации и возможности вводить значения больше заданного интервала, был написан аналог с использованием JQuery.

В нём также возможно указать минимальное и максимальное значение (включая отрицательные), значение шага как целыми, так и дробными числами, а также сделать приписку (шт., уп. и т.д.).

Кнопки по бокам

<div class="number" data-step="1" data-min="1" data-max="100">
	<input class="number-text" type="text" name="count" value="1">
	<a href="#" class="number-minus">−</a>
	<a href="#" class="number-plus">+</a>
</div>

HTML

JQuery:

$(document).ready(function() {
	$('body').on('click', '.number-minus, .number-plus', function(){
		var $row = $(this).closest('.number');
		var $input = $row.find('.number-text');
		var step = $row.data('step');
		var val = parseFloat($input.val());
		if ($(this).hasClass('number-minus')) {
			val -= step;
		} else {
			val += step;
		}
		$input.val(val);
		$input.change();
		return false;
	});

	$('body').on('change', '.number-text', function(){
		var $input = $(this);
		var $row = $input.closest('.number');
		var step = $row.data('step');
		var min = parseInt($row.data('min'));
		var max = parseInt($row.data('max'));
		var val = parseFloat($input.val());
		if (isNaN(val)) {
			val = step;
		} else if (min && val < min) {
			val = min;	
		} else if (max && val > max) {
			val = max;	
		}
		$input.val(val);
	});
});

CSS:

.number {
	user-select: none;
	position: relative;
	text-align: left;
	padding: 0;
	width: 140px;
	border: 1px solid #ddd;
	display: inline-block;
}
.number-minus, .number-plus {
	position: absolute;
	top: 0;
	width: 40px;
	height: 32px;
	line-height: 32px;
	display: block;
	background: #faf4f2;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	font-family: arial;
	color: #3e1e02;
	text-decoration: none;
}
.number-minus {
	left: 0;
	border-right: 1px solid #ddd;
}
.number-plus {
	right: 0;
	border-left: 1px solid #ddd;
}
.number-minus:hover, .number-plus:hover {
	background: #fffcfb;
}
.number-minus:active, .number-plus:active {
	background: #e8e4e2;
}
.number-text{
	display: inline-block;
	font-size: 14px;
	color: #000;
	line-height: 32px;
	height: 32px;
	padding: 0;
	margin: 0 0 0 42px;
	background: #fff;
	outline: none;
	border: none;
	width: 57px;
	text-align: center;
}

CSS

Результат:

Кнопки справа

<div class="number" data-step="1" data-min="1" data-max="100">
	<input class="number-text" type="text" name="count" value="1">
	<span class="number-unit">шт</span>
	<div class="number-controls">
		<a href="#" class="number-plus">+</a>		
		<a href="#" class="number-minus">−</a>
	</div>
</div>

HTML

JQuery:

$(document).ready(function() {
	$('body').on('click', '.number-minus, .number-plus', function(){
		var $row = $(this).closest('.number');
		var $input = $row.find('.number-text');
		var step = $row.data('step');
		var val = parseFloat($input.val());
		if ($(this).hasClass('number-minus')) {
			val -= step;
		} else {
			val += step;
		}
		$input.val(val);
		$input.change();
		return false;
	});

	$('body').on('change', '.number-text', function(){
		var $input = $(this);
		var $row = $input.closest('.number');
		var step = $row.data('step');
		var min = parseInt($row.data('min'));
		var max = parseInt($row.data('max'));
		var val = parseFloat($input.val());
		if (isNaN(val)) {
			val = step;
		} else if (min && val < min) {
			val = min;	
		} else if (max && val > max) {
			val = max;	
		}
		$input.val(val);
	});
});

CSS:

.number {
	display: inline-block;
	user-select: none;
	position: relative;
	text-align: left;
	padding: 0;
	width: 130px;
	border: 1px solid #ddd;
	height: 55px;
}
.number-controls {
	position: absolute;
	top: 0;
	right: 0;
	width: 58px;
	border-left: 1px solid #ddd;
}
.number-minus, .number-plus {
	display: block;
	height: 27px;
	line-height: 27px;
	background: #faf4f2;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	font-family: arial;
	color: #3e1e02;
	text-decoration: none;
}
.number-plus {
	border-bottom: 1px solid #ddd;
}
.number-minus:hover, .number-plus:hover {
	background: #fffcfb;
}
.number-minus:active, .number-plus:active {
	background: #e8e4e2;
}
.number-text {
	display: inline-block;
	padding: 0;
	margin: 0;    
	width: 33px;
	height: 55px;
	line-height: 55px;        
	font-size: 14px;
	color: #29160a;
	background: #fff;
	outline: none;
	border: none;
	text-align: right;
}
.number-unit{
	display: inline-block;
	font-size: 13px;
	color: #29160a;
	line-height: 55px;
	height: 55px
}

CSS

Результат:

Кнопки слева

<div class="number" data-step="1" data-min="1" data-max="100">
	<input class="number-text" type="text" name="count" value="1">
	<span class="number-unit">шт</span>
	<div class="number-controls">
		<a href="#" class="number-plus">+</a>		
		<a href="#" class="number-minus">−</a>
	</div>
</div>

HTML

JQuery:

$(document).ready(function() {
	$('body').on('click', '.number-minus, .number-plus', function(){
		var $row = $(this).closest('.number');
		var $input = $row.find('.number-text');
		var step = $row.data('step');
		var val = parseFloat($input.val());
		if ($(this).hasClass('number-minus')) {
			val -= step;
		} else {
			val += step;
		}
		$input.val(val);
		$input.change();
		return false;
	});

	$('body').on('change', '.number-text', function(){
		var $input = $(this);
		var $row = $input.closest('.number');
		var step = $row.data('step');
		var min = parseInt($row.data('min'));
		var max = parseInt($row.data('max'));
		var val = parseFloat($input.val());
		if (isNaN(val)) {
			val = step;
		} else if (min && val < min) {
			val = min;	
		} else if (max && val > max) {
			val = max;	
		}
		$input.val(val);
	});
});

CSS:

.number {
	display: inline-block;
	user-select: none;
	position: relative;
	text-align: left;
	padding: 0;
	width: 130px;
	border: 1px solid #ddd;
	height: 55px;
}
.number-controls {
	position: absolute;
	top: 0;
	left: 0;
	width: 58px;
	border-right: 1px solid #ddd;
}

.number-minus, .number-plus {
	display: block;
	height: 27px;
	line-height: 27px;
	background: #faf4f2;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	font-family: arial;
	color: #3e1e02;
	text-decoration: none;
}
.number-plus {
	border-bottom: 1px solid #ddd;
}
.number-minus:hover, .number-plus:hover {
	background: #fffcfb;
}
.number-minus:active, .number-plus:active {
	background: #e8e4e2;
}
.number-text{
	display: inline-block;
	font-size: 14px;
	color: #29160a;
	line-height: 55px;
	height: 55px;
	padding: 0;
	margin: 0 0 0 60px;
	background: #fff;
	outline: none;
	border: none;
	width: 33px;
	text-align: right;
}
.number-unit{
	display: inline-block;
	font-size: 13px;
	color: #29160a;
	line-height: 55px;
	height: 55px
}

CSS