Currently, I am in the process of developing a JavaScript code.
I have included 4 text boxes in the layout that allow only one character to be inputted into each box.
An important guideline for this task is that the rightmost field holds the id "first" while the leftmost field is identified with the id "fourth."
There are specific conditions that must be met:
The order of input should begin from the last text box (rightmost/first), moving sequentially to the second, third, and finally the fourth text box.
The value entered in the rightmost/first text box will then shift (left shift) to the second box, repeating this until all 4 fields are filled - Refer to image Insert.
If the cursor shifts to any element other than the first/rightmost box, it will automatically move back to the rightmost field as inputs are only permitted on that box.
A backspace function should be implemented which deletes the content in the rightmost/first field. Consequently, the fourth field's value will move to the third, the third to the second, and so forth, creating a right shift effect. All elements should follow this deletion pattern - Reference image Delete.
Check out Screenshot Delete here.
Note: The solution must be exclusively created using JavaScript; jQuery is not allowed.
<form>
<input type="text" id="fourth" size="1" maxlength="1" />
<input type="text" id="third" size="1" maxlength="1" />
<input type="text" id="second" size="1" maxlength="1" />
<input type="text" id="first" size="1" maxlength="1" />
<html>
<head>
</head>
<body>
<form>
<input type="text" id="fourth" size="1" maxlength="1" />
<input type="text" id="third" size="1" maxlength="1" />
<input type="text" id="second" size="1" maxlength="1" />
<input type="text" id="first" size="1" maxlength="1" />
</form>
<script>
var myInputs = document.getElementsByTagName("input");
var myEditable = document.getElementById("first");
for (var i = 0; i < myInputs.length; i++) {
myInputs[i].addEventListener("click", function() {
document.getElementById("first").focus();
})
}
myEditable.addEventListener("keypress", function(evt) {
if (evt.which >= 48 && evt.which <= 57) {
// Number input detected, initiating LEFT shift
if (myInputs[0].value == "") {
for (var i = 0; i < myInputs.length - 1; i++) {
myInputs[i].value = myInputs[i + 1].value;
}
myEditable.value = String.fromCharCode(evt.which);
}
} else {
evt.preventDefault(); // Non-integer inputs prevented in rightmost field
console.log("Incorrect input");
}
})
myEditable.addEventListener("keyup", function(evt) {
if (evt.which == 8) {
// Implementing backspace feature
for (var i = myInputs.length - 1; i >= 1; i--) {
myInputs[i].value = myInputs[i - 1].value;
}
myInputs[0].value = "";
}
});
</script>
</body>
</html>
One primary issue I am encountering is disabling non-integer inputs specifically in the first/rightmost text field. No JavaScript alert should appear; rather, it should simply reject any non-integer input.
While my current implementation prevents non-integer input in the other text fields, I need guidance on how to restrict such input solely in the first/rightmost field.