¿La mejor manera de realizar un seguimiento onchange as-you-type en tipo de entrada = "texto"?


313

En mi experiencia, el evento input type="text"onchange generalmente ocurre solo después de que deja (blur) el control.

¿Hay alguna manera de forzar que el navegador active onchange cada vez que textfield cambia el contenido? Si no, ¿cuál es la forma más elegante de rastrear esto "manualmente"?

El uso de eventos onkey* no es confiable, ya que puede hacer clic con el botón derecho en el campo y seleccionar Pegar, y esto cambiará el campo sin ninguna entrada de teclado.

Es setTimeout la única manera? .. :-) feo

204

Actualización:

Ver Another answer (2015).


original 2009 Respuesta:

Por lo tanto, desea que el evento onchange al fuego en keydown, falta de definición, y pasta? Eso es magia.

Si desea hacer un seguimiento de los cambios mientras escriben, use "onkeydown". Si necesita atrapar operaciones de pegado con el mouse, use "onpaste" (IE, FF3) y "oninput" (FF, Opera, Chrome, Safari).

Roto para <textarea> en Safari. Use textInput en su lugar

  0

¿No te has registrado oninput en IE (no lo tienen en un Mac)? Debido a que la comprobación de pegar por sí sola no es suficiente: puede seleccionar y cortar, por ejemplo. Gracias. 22 feb. 092009-02-22 20:32:53

+14

'onkeypress' se debe utilizar en lugar de' onkeydown'. 'onkeydown' se activa cuando se presiona una tecla hacia abajo. Si un usuario mantiene presionada una tecla, el evento solo se activará una vez para el primer personaje. 'onkeypress' se activa cada vez que se agrega un carácter al campo de texto. 12 mar. 122012-03-12 17:22:36

+50

No es del todo mágico disparar 'onchange' contra todas esas acciones. '<input onchange =" doSomething(); " onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();"> 'funcionará lo suficientemente bien para la mayoría. 25 abr. 122012-04-25 11:09:18

  0

¿Qué hay de borrar un texto en el cuadro de entrada usando el mouse? No creo que esto funcione. 27 ago. 122012-08-27 06:49:42

+1

Estoy de acuerdo con @DeaDEnD. De hecho, creo que el trío de eventos 'input' +' onpropertychange' + 'onkeypress' es mejor que' input' + 'onpaste' +' onkeydown'. 'onpropertychange' es la contraparte de IE para' input'. 25 dic. 122012-12-25 10:43:22

  0

'onkeyup' o' onkeypress' 26 mar. 132013-03-26 15:52:01

+42

Con jquery 1.8.3, se ve como: '$(). On ('cambio clave entrada de pegado', función() {})' 01 jun. 132013-06-01 22:34:13

+16

Use onkeyup para obtener el texto DESPUÉS de que el texto cambiado ... 11 dic. 132013-12-11 11:23:43

  0

si está usando 'onkeydown' puede ser una buena idea verificar' .isChar' y filtrar '.key' valores como' 'Shift'', '' Control'', etc ... 25 nov. 142014-11-25 04:28:56

  0

It Vale la pena señalar que, de acuerdo con la especificación, onpass es cancelable, mientras que oninput no lo es. 06 ago. 152015-08-06 08:40:51

+1

Consulte la respuesta de @Robert-Siemer a continuación. Debería ser la nueva respuesta aceptada. 01 feb. 162016-02-01 23:19:01

  0

@MaxPMagee: yaar debería. Stack es un páramo de información obsoleta en estos días. Actualicé esta respuesta como referencia [@ la respuesta de RobertSiemer] (http://stackoverflow.com/a/26202266/45433). No tengo tiempo para controlar mis respuestas de 7 años, ¡gracias por informarme! 02 feb. 162016-02-02 15:20:38

  0

Esta respuesta está DEJADA ... mire la respuesta de Robert Siemer es la más moderna y mejor 02 abr. 172017-04-02 21:36:09

+1

@AriWais: SÍ, la mayor parte de SO debería estar en desuso. Gente esta respuesta es * 8 años *. Ojalá hubiera un botón de "desaprobar" para respuestas antiguas como esta, y la comunidad podría elegir la mejor. 03 abr. 172017-04-03 14:48:14


3

Usted podría utilizar los eventos keydown, keyup y keypress también.


5

Tenía un requisito similar (campo de texto estilo twitter). Usado onkeyup y onchange. onchange realmente se ocupa de las operaciones de pegado del ratón durante el enfoque perdido del campo.

[Actualización] En HTML5 o posterior, use oninput para obtener actualizaciones de modificación de caracteres en tiempo real, como se explica en otras respuestas anteriores.

  0

La entrada es útil si desea detectar cuándo han cambiado los contenidos de un área de texto, entrada: texto, entrada: contraseña o entrada: elemento de búsqueda, porque el evento onchange en estos elementos se dispara cuando el elemento pierde el foco, no inmediatamente después del modificación. 04 may. 122012-05-04 08:59:28

  0

@hkasera Sí, con HTML5 'oninput' es el camino a seguir. Pero, cuando implementé, HTML5 no existía y teníamos IE 8 :(. Agradezco su actualización, ya que proporciona información actualizada para los usuarios. 08 may. 142014-05-08 18:47:38


7

onkeyup sucede después de escribir, por ejemplo, presiono t cuando levanto el dedo la acción sucede, pero en keydown la acción ocurre antes de que el carácter dígitos t

la esperanza que esto sea útil para alguien.

Así que onkeyup es mejor para cuando quiere enviar lo que acaba de escribir ahora.


6

Si sólo utiliza Internet Explorer, puede utilizar esto:

<input type="text" id="myID" onpropertychange="TextChange(this)" /> 

<script type="text/javascript"> 
    function TextChange(tBox) { 
     if(event.propertyName=='value') { 
      //your code here 
     } 
    } 
</script> 

Espero que ayude.

+131

"Si usa SOLAMENTE Internet Explorer" ???? :) 30 sep. 112011-09-30 13:18:55

+6

Podría ser para un proyecto interno, supongo ... :) 12 dic. 122012-12-12 21:23:21

+79

¡Gracias a Dios que no vivo en esa casa! : D 03 abr. 132013-04-03 14:42:09

+9

Hace 10 años no habría nada gracioso en esta frase .. :( 16 mar. 142014-03-16 16:26:19

+3

para mí esto ayuda, estoy desarrollando un proyecto para algunos dispositivos móviles con un sistema operativo integrado donde IE es el único navegador. 22 sep. 142014-09-22 11:47:03

+1

Si usa SOLAMENTE Internet Explorer - LOL. Hecho mi día en 2016! 07 oct. 162016-10-07 13:55:05


4

hay una solución muy cerca (no arreglar todos modos Pegar), pero la mayoría de ellos:

Funciona para las entradas, así como para las áreas de texto:

<input type="text" ... > 
<textarea ... >...</textarea> 

hacer como esto:

<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" > 
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea> 

Como ya he dicho, no todas las formas de pegar desencadenar un evento en todos los navegadores ... peor que algunos no disparan ningún caso en absoluto, pero temporizadores son horribles para ser utilizado para tales.

Pero la mayoría de las formas de Pegar se realizan con el teclado y/o el mouse, por lo que normalmente se activa una onkeyup o onmouseup después de pegar, también onkeyup se dispara al escribir en el teclado.

Asegúrate de que el código de verificación de Yor no lleva mucho tiempo ... de lo contrario, el usuario obtendrá una mala impresión.

Sí, el truco es disparar con la llave y el mouse ... pero cuidado, ambos pueden ser disparados, ¡así que ten en cuenta!


30

Javascript es impredecible y divertido aquí.

  • onchange produce sólo cuando se difumina el cuadro de texto
  • onkeyup & onkeypress no siempre ocurre en el cambio de texto
  • onkeydown ocurre en el cambio de texto (pero no se puede realizar un seguimiento de cortar & pasta con un clic del ratón)
  • onpaste & oncut se produce con la tecla e incluso con el botón derecho del ratón.

lo tanto, para realizar el seguimiento del cambio en la caja de texto, necesitamos onkeydown, oncut y onpaste. En la devolución de llamada de estos eventos, si comprueba el valor del cuadro de texto, no obtiene el valor actualizado a medida que se cambia el valor después de la devolución de llamada. Entonces, una solución para esto es establecer una función de tiempo de espera con un tiempo de espera de 50 milisegundos (o puede ser menor) para rastrear el cambio.

Esto es un truco sucio, pero esta es la única forma, como he investigado.

Aquí hay un ejemplo. http://jsfiddle.net/2BfGC/12/

+3

'oninput' y' textInput' son los eventos que es la solución real para esto, pero no es compatible con todos los navegadores. 05 jul. 122012-07-05 06:59:38

+1

gracias por mencionar 'oncut' 19 nov. 142014-11-19 05:15:11

  0

Para la segunda viñeta Supongo que se refería a 'onkeyup' y' onkeydown', que son similares. Ambos pueden capturar las teclas Ctrl, Alt, Shift y Meta. Para el tercer punto supongo que significa 'onkeypress'. 22 feb. 182018-02-22 14:56:49


2

Por favor, juez enfoque próxima usando jQuery:

HTML:

<input type="text" id="inputId" /> 

Javascript (jQuery):

$("#inputId").keyup(function(){ 
     $("#inputId").blur(); 
     $("#inputId").focus(); 
}); 

$("#inputId").change(function(){ 
     //do whatever you need to do on actual change of the value of the input field 
}); 
  0

Uso de la misma manera:) 25 jun. 152015-06-25 18:26:21

  0

Me doy cuenta de que esta no es la respuesta más reciente, pero no difuminaría ni redirigiría la entrada de cada tecla, estropearía la ubicación del cursor si estuviera en alguna parte. excepto el final de la entrada? 02 may. 172017-05-02 16:26:04

  0

@ MichaelMartin-Smucker Usted pensaría que sí, pero aparentemente no: https://jsfiddle.net/gsss8c6L/ 04 jul. 172017-07-04 03:31:46


395

En estos días escuchan oninput. Se siente como onchange sin la necesidad de perder el foco en el elemento. Es HTML5.

Es compatible con todos (incluso con dispositivos móviles), excepto con IE8 y versiones anteriores. Para IE, agregue onpropertychange.Yo lo uso como esto:

<script> 
    onload = function() { 
     var e = document.getElementById('myInput'); 
    e.oninput = myHandler; 
     e.onpropertychange = e.oninput; // for IE8 
     // e.onchange = e.oninput; // FF needs this in <select><option>... 
     // other things for onload() 
    }; 
</script> 
<input type=text id=myInput> 
+26

En un mundo en constante cambio como los Estándares Web es, a veces la respuesta aceptada podría cambiar después de algunos años ... Esta es la nueva respuesta aceptada para mí. 25 nov. 152015-11-25 15:50:08


3

"entrada" trabajó para mí.

var searchBar = document.getElementById("searchBar"); 
searchBar.addEventListener("input", PredictSearch, false); 

26

A continuación código funciona bien para mí con jQuery 1.8.3

HTML: <input type="text" id="myId" />

Javascript/jQuery:

$("#myId").on('change keydown paste input', function(){ 
     doSomething(); 
}); 
+7

La jQuery ** library ** no está etiquetada en la pregunta. 16 feb. 152015-02-16 21:03:48

+12

Jquery es una API de Javascript, y me trajeron aquí mediante una búsqueda con la palabra clave Jquery, no creo que valga la pena crear una pregunta nueva para cada pregunta de javascript para la respuesta de Jquery ... 27 may. 152015-05-27 12:12:49

+5

Si no se permitía sugerir personas el uso de bibliotecas en las respuestas habría MUCHAS más preguntas sin contestar en SO 17 dic. 152015-12-17 03:01:24

  0

Dispara múltiples veces. Probablemente debido al cambio y la clave. La entrada probable solo es necesaria aquí. 01 sep. 172017-09-01 11:09:32


2

Para rastrear cada uno de tratar este ejemplo y antes de eso completamente reducir la velocidad de parpadeo del cursor a cero.

<body> 
 
//try onkeydown,onkeyup,onkeypress 
 
<input type="text" onkeypress="myFunction(this.value)"> 
 
<span> </span> 
 
<script> 
 
function myFunction(val) { 
 
//alert(val); 
 
var mySpan = document.getElementsByTagName("span")[0].innerHTML; 
 
mySpan += val+"<br>"; 
 
document.getElementsByTagName("span")[0].innerHTML = mySpan; 
 
} 
 
</script> 
 

 
</body>

onBlur: evento genera en la salida

onchange: evento genera a la salida si los cambios realizados en inputText

onkeydown: evento genera en cualquier pulsación de tecla (por clave también tiene mucho tiempo)

onkeyup: el evento se genera en cualquier versión de la tecla

onkeypress: lo mismo que onkeydown (o onkeyup), pero no reaccionará de ctrl, backsace, alt otra