Skip to content

Commit

Permalink
add focusing for mobile support
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gerile3
Gerile3 committed Sep 12, 2024
1 parent 34ebd0d commit 0c7a844
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 25 deletions.
50 changes: 25 additions & 25 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,43 +17,43 @@ <h1>Word Master</h1>

<section class="word-container">
<div class="word-row">
<input disabled type="text" name="char-1" maxlength="1" size="1" value="">
<input disabled type="text" name="char-2" maxlength="1" size="1" value="">
<input disabled type="text" name="char-3" maxlength="1" size="1" value="">
<input disabled type="text" name="char-4" maxlength="1" size="1" value="">
<input disabled type="text" name="char-5" maxlength="1" size="1" value="">
<input type="text" name="char-1" maxlength="1" size="1" value="">
<input type="text" name="char-2" maxlength="1" size="1" value="">
<input type="text" name="char-3" maxlength="1" size="1" value="">
<input type="text" name="char-4" maxlength="1" size="1" value="">
<input type="text" name="char-5" maxlength="1" size="1" value="">
</div>

<div class="word-row">
<input disabled type="text" name="char-1" maxlength="1" size="1" value="">
<input disabled type="text" name="char-2" maxlength="1" size="1" value="">
<input disabled type="text" name="char-3" maxlength="1" size="1" value="">
<input disabled type="text" name="char-4" maxlength="1" size="1" value="">
<input disabled type="text" name="char-5" maxlength="1" size="1" value="">
<input type="text" name="char-1" maxlength="1" size="1" value="">
<input type="text" name="char-2" maxlength="1" size="1" value="">
<input type="text" name="char-3" maxlength="1" size="1" value="">
<input type="text" name="char-4" maxlength="1" size="1" value="">
<input type="text" name="char-5" maxlength="1" size="1" value="">
</div>

<div class="word-row">
<input disabled type="text" name="char-1" maxlength="1" size="1" value="">
<input disabled type="text" name="char-2" maxlength="1" size="1" value="">
<input disabled type="text" name="char-3" maxlength="1" size="1" value="">
<input disabled type="text" name="char-4" maxlength="1" size="1" value="">
<input disabled type="text" name="char-5" maxlength="1" size="1" value="">
<input type="text" name="char-1" maxlength="1" size="1" value="">
<input type="text" name="char-2" maxlength="1" size="1" value="">
<input type="text" name="char-3" maxlength="1" size="1" value="">
<input type="text" name="char-4" maxlength="1" size="1" value="">
<input type="text" name="char-5" maxlength="1" size="1" value="">
</div>

<div class="word-row">
<input disabled type="text" name="char-1" maxlength="1" size="1" value="">
<input disabled type="text" name="char-2" maxlength="1" size="1" value="">
<input disabled type="text" name="char-3" maxlength="1" size="1" value="">
<input disabled type="text" name="char-4" maxlength="1" size="1" value="">
<input disabled type="text" name="char-5" maxlength="1" size="1" value="">
<input type="text" name="char-1" maxlength="1" size="1" value="">
<input type="text" name="char-2" maxlength="1" size="1" value="">
<input type="text" name="char-3" maxlength="1" size="1" value="">
<input type="text" name="char-4" maxlength="1" size="1" value="">
<input type="text" name="char-5" maxlength="1" size="1" value="">
</div>

<div class="word-row" >
<input disabled type="text" name="char-1" maxlength="1" size="1" value="">
<input disabled type="text" name="char-2" maxlength="1" size="1" value="">
<input disabled type="text" name="char-3" maxlength="1" size="1" value="">
<input disabled type="text" name="char-4" maxlength="1" size="1" value="">
<input disabled type="text" name="char-5" maxlength="1" size="1" value="">
<input type="text" name="char-1" maxlength="1" size="1" value="">
<input type="text" name="char-2" maxlength="1" size="1" value="">
<input type="text" name="char-3" maxlength="1" size="1" value="">
<input type="text" name="char-4" maxlength="1" size="1" value="">
<input type="text" name="char-5" maxlength="1" size="1" value="">
</div>
</section>

Expand Down
6 changes: 6 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@ document.addEventListener("keyup", (event) => {
inputs[currentIndex].value = event.key.toUpperCase();
if ((currentIndex + 1) % 5 !== 0 && currentIndex < 25){
currentIndex++;
inputs[currentIndex].focus(); // Move focus to the next input
}
}

Expand All @@ -189,6 +190,7 @@ document.addEventListener("keyup", (event) => {
inputs[currentIndex].value = "";
} else if (currentIndex > minIndex) {
currentIndex--;
inputs[currentIndex].focus();
inputs[currentIndex].value = "";
}
}
Expand All @@ -202,3 +204,7 @@ window.addEventListener("load", () => {
loadcomplete(false)
});

inputs.forEach(input => {
input.readOnly = true; // Keeps the input focusable but prevents editing
});

0 comments on commit 0c7a844

Please sign in to comment.