El evento de entrada se activa cuando el usuario cambia un elemento, el valor de un elemento o el elemento <textarea>.
DOM InputEvent ocurre cuando un elemento en el documento HTML recibe información del usuario.
Propiedad InputEvent:
- data: Devuelve los caracteres insertados.
- dataTransfer: Devuelve un objeto que contiene información sobre los datos insertados/eliminados.
- getTargetRanges: devuelve una array que contiene rangos objetivo que se verán afectados por la inserción/.eliminación.
- inputType: Devuelve el tipo de cambio (es decir, «insertar» o «eliminar»)
- isComposing: Devuelve el estado del evento.
Sintaxis:
<element oninput="Function">
Ejemplo-1: Acceso al tipo de entrada usando «event.inputType;»
<!DOCTYPE html>
<html>
<body>
<input type="text"
id="myInput"
oninput="myFunction(event)">
<p>The type of action:<span id="demo">
</span></p>
<script>
function myFunction(event) {
document.getElementById(
"demo").innerHTML =
event.inputType;
}
</script>
</body>
</html>
Salida:
Antes:
Después:
Ejemplo-2: Acceso a la propiedad de datos para devolver caracteres insertados.
<!DOCTYPE html>
<html>
<body>
<input type="text"
id="myInput"
oninput="myFunction(event)">
<p>The inserted character: <span id="demo">
</span></p>
<script>
function myFunction(event) {
document.getElementById(
"demo").innerHTML =
event.data;
}
</script>
</body>
</html>
Salida:
Antes:
Después:
Ejemplo-3: oninput devuelve todos los datos insertados.
<!DOCTYPE html>
<html>
<body>
<p>Write something in the text
field to start the function....</p>
<input type="text"
id="myInput"
oninput="Function()">
<p id="demo"></p>
<script>
function Function() {
var x = document.getElementById(
"myInput").value;
document.getElementById(
"demo").innerHTML =
"You wrote: " + x;
}
</script>
</body>
</html>
Salida:
Antes:
Después:
Navegadores compatibles:
- Google Chrome
- MozillaFirefox 4.0
- Internet Explorer 9.0
- Safari 5.0
- Ópera
Publicación traducida automáticamente
Artículo escrito por kartikgoel1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA