Quiero agregar un detector de eventos a mi clase de entrada para realizar alguna validación.
Así que aquí está mi código:
<!DOCTYPE html> <html> <body> <input type="text" class="inputs form-control" id="input" tabindex="9" maxlength="2"> <script> var elements = document.getElementsByClassName("inputs"); input.addEventListener('keyup', (event) => { let regEx = /^[0-9a-fA-F]+$/; let isHex = regEx.test(event.target.value.toString()); if(!isHex) { elements.value = elements.value.slice(0, -1); } }) </script> </body> </html>Entonces, si hago eso con id, el código funciona perfectamente pero no funciona con la clase. Entonces, ¿sabes por qué?
getElementsByClassName devuelve unaHTMLCollection . Debe agregar el detector de eventos al primer elemento en él.
<!DOCTYPE html> <html> <body> <input type="text" class="inputs form-control" id="input" tabindex="9" maxlength="2"> <script> var elements = document.getElementsByClassName("inputs")[0]; elements.addEventListener('keyup', (event) => { let regEx = /^[0-9a-fA-F]+$/; let isHex = regEx.test(event.target.value.toString()); if(!isHex) { elements.value = elements.value.slice(0, -1); } }) </script> </body> </html>Si desea agregar el detector de eventos a cada elemento, recorra HTMLCollection:
<!DOCTYPE html> <html> <body> <input type="text" class="inputs form-control" id="input" tabindex="9" maxlength="2"> <script> var elements = [...document.getElementsByClassName("inputs")]; elements.forEach(e => e.addEventListener('keyup', (event) => { let regEx = /^[0-9a-fA-F]+$/; let isHex = regEx.test(event.target.value.toString()); if(!isHex) { elements.value = elements.value.slice(0, -1); } })) </script> </body> </html>