The script below works fine for the first div with the .inp class, it doesn't work for the second block with the same class. I broke my head trying to figure out why this is happening and how to make it work, while NOT ADDING new classes or IDs to the second div.
document.querySelector("input").focus();
document.querySelector(".inp").addEventListener("input", function({ target, data }){
// Exclude non-numeric characters (if a value has been entered)
data && ( target.value = data.replace(/[^0-9]/g,'') );
const hasValue = target.value !== "";
const hasSibling = target.nextElementSibling;
const hasSiblingInput = hasSibling && target.nextElementSibling.nodeName === "INPUT";
if ( hasValue && hasSiblingInput ){
target.nextElementSibling.focus();
}
});.inp input {
display: inline-block;
width: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inp">
<input type="text" name="digit1" />
<input type="text" name="digit2" />
<input type="text" name="digit3" />
<input type="text" name="digit4" />
<input type="text" name="digit5" />
</div>
<div class="inp">
<input type="text" name="digit1" />
<input type="text" name="digit2" />
<input type="text" name="digit3" />
<input type="text" name="digit4" />
<input type="text" name="digit5" />
</div>.querySelector will work only for the first element it finds, you should use .querySelectorAll instead. It will return a node list of all selectors with your class.
Then you can iterate with a loop through all of them and add the event listener.
Here you go:
document.querySelector("input").focus();
document.querySelectorAll(".inp").forEach(inp => {
inp.addEventListener("input", function({ target, data }){
// Exclude non-numeric characters (if a value has been entered)
data && ( target.value = data.replace(/[^0-9]/g,'') );
const hasValue = target.value !== "";
const hasSibling = target.nextElementSibling;
const hasSiblingInput = hasSibling && target.nextElementSibling.nodeName === "INPUT";
if ( hasValue && hasSiblingInput ){
target.nextElementSibling.focus();
}
});
})
.inp input {
display: inline-block;
width: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inp">
<input type="text" name="digit1" />
<input type="text" name="digit2" />
<input type="text" name="digit3" />
<input type="text" name="digit4" />
<input type="text" name="digit5" />
</div>
<div class="inp">
<input type="text" name="digit1" />
<input type="text" name="digit2" />
<input type="text" name="digit3" />
<input type="text" name="digit4" />
<input type="text" name="digit5" />
</div>As Pointy mentioned querySelector() method can only be used to access a single element while querySelectorAll() method can be used to access all elements which match with a specified CSS selector.
Using (document|element).querySelector will give the first element which matches the query.
You can user (document|element).querySelectorAll instead in this scenario.
document.querySelector("input").focus();
document.querySelectorAll(".inp").forEach(element=>element.addEventListener("input", function({ target, data }){
// Exclude non-numeric characters (if a value has been entered)
data && ( target.value = data.replace(/[^0-9]/g,'') );
const hasValue = target.value !== "";
const hasSibling = target.nextElementSibling;
const hasSiblingInput = hasSibling && target.nextElementSibling.nodeName === "INPUT";
if ( hasValue && hasSiblingInput ){
target.nextElementSibling.focus();
}
})).inp input {
display: inline-block;
width: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inp">
<input type="text" name="digit1" />
<input type="text" name="digit2" />
<input type="text" name="digit3" />
<input type="text" name="digit4" />
<input type="text" name="digit5" />
</div>
<div class="inp">
<input type="text" name="digit1" />
<input type="text" name="digit2" />
<input type="text" name="digit3" />
<input type="text" name="digit4" />
<input type="text" name="digit5" />
</div>