HTML-Login-Formular mit "Benutzername", "Passwort" und "Token"

Hier ein Beispiel für 6 einzelne Eingabefelder, welche ausschließlich Zahlenwerte erlauben:

<form id="login" name="login">
	<input id="user-text-field" type="email" autocomplete="username"/>
	<input id="password-text-field" type="password" autocomplete="current-password"/>
	<div class="col-two-third" id="mfa_container">
		<input type="text" id="token_1" name="token[1]" maxlength="1" autocomplete="one-time-code" />
		<input type="text" id="token_2" name="token[2]" maxlength="1" autocomplete="one-time-code" />
		<input type="text" id="token_3" name="token[3]" maxlength="1" autocomplete="one-time-code" />
		<input type="text" id="token_4" name="token[4]" maxlength="1" autocomplete="one-time-code" />
		<input type="text" id="token_5" name="token[5]" maxlength="1" autocomplete="one-time-code" />
		<input type="text" id="token_6" name="token[6]" maxlength="1" autocomplete="one-time-code" />
	</div>
</form>

Hinweis: Das Attribut „autocomplete“ ist hierbei wichtig, damit der Token oder bei Apple auch Bestätigungscode genannt, automatisch in das Token-Feld übernommen werden kann.

<script lang="js">
	$( "#mfa_container input" ).keyup( function( e ) {
		if( e.which < 96 || e.which > 105 ) { // nur 0-9 erlauben
			this.value = '';
		} else if( this.value.length == this.maxLength ) {
			$( this ).next('input').focus(); // zum naechsten Feld springen
		}
	});
</script>

#mfa_container {
	display: flex;
	flex-direction: row;
	height: 64px;
}
 
#mfa_container input {
	text-align: center;
	margin-left: 10px;
	border-width: 2px;
	font-size: 20px;
}