Как написать логику sms инпут на javascript?

Question

[Дмитрий]

Как я могу реализовать логику такого инпута на чистом js ? То есть каждый input должен входить в фокус следуйшего после своего заполнение одним символом.

Может есть какие-то примеры на codepen?

Comments

[Ankhena]

Может есть какие-то примеры на codepen?

Наберите там в поиске что-нибудь типа "card input" и адаптируйте под себя

Answer 1

[Okujava-script]

<style>
td{
	width: 50px;
	height: 25px;
	text-align: center;
	font-size: 20px;
}
hr{
	width: 70%;
	display: none;
}
</style>
<table cellspacing=0>
	<tr id=numbers></tr>
	<tr id=cursors></tr>
</table>
<script>
let index = 0;
let code = '';
let input = false;
for(i = 0; i < 4; i ++){
	let number = document.createElement('td');
	number.id = 'i' + i;
	numbers.append(number);
	let forcursor = document.createElement('td');
	cursors.append(forcursor);
	let cursor = document.createElement('hr');
	cursor.id = 'c' + i;
	forcursor.append(cursor);
}
const putSMSCode = _ => {
	input = true;
	document.getElementById('c' + index).style.display = 'block';
}
putSMSCode();
document.onkeydown = e => {
	if(input){
		if(index < 3){
			document.getElementById('c' + (index + 1)).style.display = 'block';
		}
		document.getElementById('c' + index).style.display = 'none';
		code += e.key;
		document.getElementById('i' + index).innerHTML = '<b>' + e.key + '</b>';
		index ++;
		if (index >= 4) {
			index = 0;
			input = false;
			console.log(code);
		}
	}
}
</script>