Tengo el siguiente código que oculta un div cuando hay algo escrito en un cuadro de texto.
<script type="text/javascript" charset="utf-8"> $('#email').change(function () { var len = $('#email').val().length; if (len > 0) { $("#user_accounts").fadeOut(1) } else { $("#user_accounts").fadeIn(1) } }); </script>Esto funciona, pero solo funciona después de hacer clic fuera del cuadro de texto y no cuando comienza a escribir. Quería ver si hay una forma de ejecutar este código cuando comienzas a escribir y no solo cuando hay texto en el campo y haces clic.
Es bastante fácil, aquí está el código:
document.getElementById('myInput').addEventListener('keyup', () => { if (document.getElementById('myInput').value.length > 0) { document.getElementById('myDiv').style.display = 'none'; } else { document.getElementById('myDiv').style.display = 'block'; } }) #myInput { width: 200px; height: 35px; padding: 0 10px; background: #333; color: #fff; border: 0; outline: 0; font-family: arial; } #myInput::placeholder { color: #ccc; } #myDiv { width: 220px; height: 70px; margin-top: 20px; line-height: 70px; text-align: center; font-family: arial; background: red; color: #fff; } <html> <body> <input id='myInput' type="text" placeholder="Type here!"> <div id='myDiv'>Can you see me?</div> </body> </html>Básicamente usando
document.getElementById('myInput').addEventListener('keyup', () => { // your function }está llamando a una función cada vez que alguien escribe dentro de la entrada (en realidad, la función se llama solo cuando libera una tecla) y luego simplemente verifica la longitud del valor de la entrada dentro de la función y oculta o no el div basado en la longitud.
Espero que sea lo que estás buscando, si tienes alguna pregunta, házmelo saber.
De acuerdo con la documentación , para <input type="text"> , el evento de change solo se activa después de que el elemento pierde su foco (por ejemplo, hacer clic).
A diferencia del evento de change , el evento de input se activa cada vez que cambia el valor del elemento. Por lo tanto, se adapta mejor a su caso de uso.
Su código se verá así:
$('#email').on('input', function() { var len = $('#email').val().length; if (len > 0) { $("#user_accounts").fadeOut(1) } else { $("#user_accounts").fadeIn(1) } });para un código más limpio, recomendaría usar HTML en línea y en lugar de onchange, en realidad usaría onkeyup (como señalaron otros comentaristas), este evento llamaría a una función con nombre que estaría vinculada al evento.
como sigue:
<element onkeyup="handleInputKeyup">...</element>
const handleInputKeyup = (event) => {//do something with the event here};