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

Поле для ввода 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, обновлено 07.01.2021
2637

Комментарии 1

Davides1 Davides1
7 марта 2021 в 20:49
0
Все отлично. Только вот стирать не удобно, приходится вручную переключаться на нужное поле

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

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

Поле для выбора количества товаров
Т.к. поле Input type number не подходит для выбора количества товаров из-за его трудной стилизации и возможности...
2092
+2
Как ограничить ввод данных в текстовое поле
Примеры, приведенные ниже позволят ограничить ввод символов в текстовые поле. Например, можно ограничить количество...
6940
0
Работа с Textarea jQuery
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
34345
+4
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
18075
+19
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
29989
+4
Селект с чекбоксами
Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать сtrl и все сбрасывается. В место него можно использовать чекбоксы в выпадающем списке.
18255
+5