Estoy tratando de construir un juego de estilo "Jumble". Quiero tener campos de entrada de un solo carácter con algunos círculos superpuestos en ellos. También quiero que el usuario pueda pasar automáticamente al siguiente campo de entrada después de completar el campo de entrada. Aquí están los campos:
<form id="jumble_word"> <label><input class="inputs" type="text" maxlength="1"></label> <input class="inputs" type="text" maxlength="1"> <input class="inputs" type="text" maxlength="1"> <input class="inputs" type="text" maxlength="1"> <input class="inputs" type="text" maxlength="1"> <input class="inputs" type="text" maxlength="1"> <input class="inputs" type="text" maxlength="1"> </form>Aquí está el JQUERY que encontré con pestañas automáticas. Sin embargo, no se tabula automáticamente en la primera entrada, y después de algunas investigaciones, entiendo que .next() solo funciona con hermanos.
$(":input").keyup(function() { if (this.value.length == this.maxLength) { $(this).next(':input').focus(); } });Estoy usando la etiqueta de la etiqueta para superponer el círculo. Aquí está el CSS
input[type=text] { width: 72px; height: 72px; box-sizing: border-box; margin: 10px 5px; text-align: center; text-transform: capitalize; font-size: 36px; z-index: 1 !important; } label { position: relative; } label:before { content: ""; position: absolute; left: 6px; top: -34px; bottom: 0; width: 70px; height: 70px; background: url("jumble.svg") center / contain no-repeat; }¿Cómo puedo cambiar el jquery para que tenga una pestaña automática, independientemente de si un campo de entrada está rodeado por una etiqueta de etiqueta?
No está claro por qué su secuencia de comandos no funciona para .next() . Puede haber otros elementos o algo que bloquee su secuencia de comandos. Probé con lo siguiente.
$(function() { $("#jumble_word > input").not(":last").keyup(function(e) { if ($(this).val().length == 1) { $(this).next("input").focus(); } }); }); .inputs { width: 72px; height: 72px; margin: 5px; text-align: center; text-transform: capitalize; font-size: 36px; z-index: 1 !important; border: 1px solid #222; } .round { border-radius: 50%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="jumble_word"> <input class="inputs" type="text" maxlength="1"> <input class="inputs round" type="text" maxlength="1"> <input class="inputs" type="text" maxlength="1"> <input class="inputs" type="text" maxlength="1"> <input class="inputs" type="text" maxlength="1"> <input class="inputs" type="text" maxlength="1"> <input class="inputs" type="text" maxlength="1"> </form>Esto funcionó como se esperaba. Escribir una letra en un campo hace que se centre en el siguiente elemento.