El siguiente script funciona bien para el primer div con la clase .inp , no funciona para el segundo bloque con la misma clase. Me rompí la cabeza tratando de averiguar por qué sucede esto y cómo hacer que funcione, SIN AGREGAR nuevas clases o ID al segundo 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 funcionará solo para el primer elemento que encuentre, debe usar .querySelectorAll en su lugar. Devolverá una lista de nodos de todos los selectores con su clase.
Luego puede iterar con un bucle a través de todos ellos y agregar el detector de eventos.
Aquí tienes:
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>Como mencionó Pointy, el método querySelector() solo se puede usar para acceder a un solo elemento, mientras que el método querySelectorAll() se puede usar para acceder a todos los elementos que coinciden con un selector CSS específico.
El uso (document|element).querySelector dará el primer elemento que coincida con la consulta.
Puede usar (document|element).querySelectorAll en su lugar en este escenario.
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>