Поле для ввода PIN-кода

Если требуется поле для ввода пин-кода, можно использовать следующий вариант на jQuery.

Для удобства ввода, поле разделено на четыре сегмента. В каждое поле можно ввести только одну цифру, поэтому используется input number, темболее на мобильных для них сразу открывается цифровая клавиатура. После ввода цифры, фокус переключается на следующее поле.

Также чтобы на сервере на собирать введенные дынные из четырех полей, добавлен <input type="hidden" name="pincode">, в которе помещается все значение.

<div class="pincode">
	<input type="number">
	<input type="number">
	<input type="number">
	<input type="number">
	<input type="hidden" name="pincode">
</div>

<script src="/jquery.min.js"></script>

<script>
$('input').keydown(function(e){
	$(this).val('');
});

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

	// Заполнение input hidden
	var fullval = '';
	$inputs.each(function(){
		fullval = fullval + (parseInt($(this).val()) || '0');
	});
	$wrap.find('input[type="hidden"]').val(fullval);
});
</script>
HTML
.pincode { 
	text-align: center;
	padding: 20px 0;
}
.pincode input[type="number"] {
	display: inline-block;
	width: 100px;
	height: 70px;
	line-height: 50px;
	text-align: center;
	border: 2px solid #5a5a5a;
	color: #000;
	padding: 16px 0px;
	margin: 0 10px;
	font-size: 50px;
	font-weight: 700;
	outline: none;
	background-color: #fff;
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	appearance: textfield;
	box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
}
.pincode input[type="number"]::-webkit-outer-spin-button,
.pincode input[type="number"]::-webkit-inner-spin-button {
	display: none;
}

.pincode input[type="number"]:focus {
	border: 2px solid #1dd216;
}
CSS

Пример:

09.10.2020

Комментарии

, чтобы добавить комментарий.

Другие публикации

Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
22396
+3
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
7722
+10
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
5872
+1
Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать сtrl и все сбрасывается. В место него можно использовать чекбоксы в выпадающем списке.
9912
+3
Изображения нужно сжимать для ускорения скорости загрузки сайта, но как это сделать? На многих хостингах нет...
7790
+5
Небольшая javascript функция для склонения числительных, в которой первый аргумент число, второй – массив с тремя элементам.
157
0