HTML | Atributo de evento oninput

Este atributo funciona cuando obtiene el valor de entrada del usuario. Este atributo se activa principalmente cuando el usuario cambia el valor de los elementos <input> y <textarea>. Este atributo es bastante similar al atributo onchange, pero la diferencia básica es que el atributo de evento oninput ocurre inmediatamente cuando el valor del elemento cambia, mientras que el atributo onchange ocurre cuando el elemento pierde el foco. La otra diferencia es que el atributo onchange también funciona con el elemento <select>.
Etiquetas admitidas:

  • <tipo de entrada=”contraseña”>
  • <tipo de entrada=”buscar”>
  • <tipo de entrada=”texto”> 
  • <área de texto>

Sintaxis: 

<element oninput = "script">

Valor de atributo: este atributo contiene un script de valor y funciona cuando se activa un evento de entrada. Este atributo es compatible con muchas etiquetas HTML: <input type=”password”>, <input type=”search”>, <input type=”text”> y <textarea>.

Ejemplo:  

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>oninput attribute</title>
        <style>
            body {
                text-align:center;
            }
            h1 {
                color:green;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h2>oninput Attribute</h2>
        Enter some Text here: <input type="text" id="GFG"
        oninput="Geeks()">
        <p id="sudo"></p>
 
 
        <script>
            function Geeks() {
                var x = document.getElementById("GFG").value;
                document.getElementById("sudo").innerHTML =
                "Entered Text: " + x;
            }
        </script>
    </body>
</html>                   

Producción: 

Navegadores compatibles: los navegadores compatibles con el atributo de evento oninput se enumeran a continuación:  

  • Apple Safari 5.0
  • Google Chrome
  • Firefox 4.0
  • Ópera
  • Internet Explorer 9.0

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *