Поле для ввода показаний счетчика

15.10.2020

3660

Пример составного поля для ввода показаний приборов учета с использованием несколькольких <input type="number"> и jQuery. Обычно показание состоит из пяти целых чисел и трех после запятой.

В вёрстку добавлен <input type="hidden" name="meter">, при загрузки страницы значение (например «00090,000») из него парсится и вставляется во все поля, и обновляется при вводе новых данных.

<div class="meter">
	<div class="meter-whole">
		<input type="number">
		<input type="number">
		<input type="number">
		<input type="number">
		<input type="number">
	</div>
	<span>,</span>
	<div class="meter-fractional">
		<input type="number">
		<input type="number">
		<input type="number">
	</div>
	<input type="hidden" name="meter" value="00090,000">
</div>

HTML

CSS:

.meter { 
	display: inline-block;
	padding: 20px 0;
	font-size: 20px;
}
.meter-whole {
	display: inline-block;
	border: 1px solid #5a5a5a;
	box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
	font-size: 0;
}
.meter-fractional {
	display: inline-block;
	border: 1px solid orange;
	box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
	font-size: 0;
}

.meter input[type="number"] {
	display: inline-block;
	width: 28px;
	height: 40px;    
	border: none;
	text-align: center;
	color: #000;
	padding: 0;
	margin: 0;
	font-size: 22px;
	line-height: 22px;
	outline: none;
	background: #fff;
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	appearance: textfield;
}
.meter input[type="number"]::-webkit-outer-spin-button,
.meter input[type="number"]::-webkit-inner-spin-button {
	display: none;
}
.meter input[type="number"]:focus {
	background: #ec7f21;
	caret-color: #ec7f21;
	color: #fff;
}

.meter-fractional input[type="number"] {
	color: #666;
}

CSS

jQuery:

$('.meter input').keydown(function(e){
	$(this).val('');
});

$('.meter input').keyup(function(e){
	var $wrap = $(this).closest('.meter');
	var $inputs = $wrap.find('input[type="number"]');	
	var val = $(this).val();
	
	// Ввод только цифр
	if(val == val.replace(/[0-9]/, '')) {
		$(this).val('0');
		return false;
	}
	
	// Передача фокуса следующему innput
	$inputs.eq($inputs.index(this) + 1).focus();

	// Заполнение input hidden
	var fullval = '';
	$inputs.each(function(i){
		fullval = fullval + (parseInt($(this).val()) || '0');
		if (i == 4) {
			fullval = fullval + ',';
		}
	});
	$wrap.find('input[type="hidden"]').val(fullval);
});

// Вставка значений из input hidden
$('.meter').each(function(){
	var val = $(this).find('input[type="hidden"]').val();
	if (val.length > 0) {
		var vals = val.replace(',', '').split('');
		$(this).closest('.meter').find('input[type="number"]').each(function(i){
			$(this).val(vals[i]);
		});
	}
});