I'm trying to build a "Jumble" style game. I want to have single character input fields with some having circles overlayed in them. I also want the user to be able to auto-tab to the next input field after filling out the input field. Here's the fields:
<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>
Here's the JQUERY that I found that auto-tabs. However it doesn't auto-tab on the first input, and after some research, I understand that .next() only works with siblings.
$(":input").keyup(function() {
if (this.value.length == this.maxLength) {
$(this).next(':input').focus();
}
});
I'm using the label tag to overlay the circle. Here's the 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;
}
How can I change the jquery to have it auto-tab, regardless if an input field is surrounded by a label tag?
It's not clear why your script is not working for .next(). There may be other elements or something blocking your script. I tested with the following.
$(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>This worked as expected. Typing a letter into a Field causes it to focus on the next element.