¿La mejor manera de rastrear onchange a medida que escribe en input type = "text"?

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

¿Hay alguna forma de obligar al navegador a activarse onchangecada vez textfieldque cambia el contenido? Si no, ¿cuál es la forma más elegante de rastrear esto "manualmente"?

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

¿Es setTimeoutla única manera? .. Feo :-)

Actualizar:

Ver otra respuesta (2015).

Respuesta original de 2009:

Entonces, ¿quieres que el onchangeevento se active al presionar teclas, desenfocar y pegar? Eso es magia

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

¹ _{Roto por <textarea>en Safari. Usar en su textInputlugar}

En estos días escucha oninput. Se siente onchangesin la necesidad de perder el foco en el elemento. Es HTML5.

Es compatible con todos (incluso móviles), excepto IE8 y versiones inferiores. Para IE agregar onpropertychange. Lo uso así:

const source = document.getElementById('source');
const result = document.getElementById('result');

const inputHandler = function(e) {
  result.innerHTML = e.target.value;
}

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler); 

<input id="source">
<div id="result"></div>

El siguiente 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();
});

Javascript es impredecible y divertido aquí.

• onchange ocurre solo cuando desenfoca el cuadro de texto
• onkeyup& onkeypressno siempre ocurre en el cambio de texto
• onkeydown ocurre en el cambio de texto (pero no puede rastrear cortar y pegar con el clic del mouse)
• onpaste& oncutocurre con la pulsación de teclas e incluso con el clic derecho del mouse.

Entonces, para rastrear el cambio en el cuadro de texto, necesitamos onkeydown, oncutyonpaste . En la devolución de llamada de este evento, si verifica el valor del cuadro de texto, no obtiene el valor actualizado ya que el valor se cambia 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 menos) para rastrear el cambio.

Este es un truco sucio, pero esta es la única forma, como investigué.

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

onkeyupsucede después de escribir, por ejemplo, presiono tcuando levanto el dedo, la acción ocurre pero en keydownla acción sucede antes de que digito el caráctert

Espero que esto sea útil para alguien.

Por onkeyuplo tanto, es mejor para cuando desea enviar lo que acaba de escribir ahora.

Tenía un requisito similar (campo de texto de estilo twitter). Usado onkeyupy onchange. onchangeen realidad se encarga de las operaciones de pegado del mouse durante el enfoque perdido del campo.

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

Creo que en 2018 es mejor usar el input evento.

-

Como lo describe la especificación WHATWG ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ):

Se activa en los controles cuando el usuario cambia el valor (consulte también el evento de cambio )

-

Aquí hay un ejemplo de cómo usarlo:

<input type="text" oninput="handleValueChange()">

Si usa SOLO Internet Explorer, puede usar 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.

hay una solución bastante cercana (no arregles todas las formas de pegar) pero la mayoría de ellas:

Funciona tanto para entradas como para áreas de texto:

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

Hazlo así:

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

Como dije, no todas las formas de pegar activan un evento en todos los navegadores ... lo peor es que algunos no activan ningún evento en absoluto, pero los temporizadores son horribles para ser utilizados para tal.

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

Asegúrese de que su código de verificación no tome mucho tiempo ... de lo contrario, el usuario tendrá una mala impresión.

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

Por favor, juzgue el próximo enfoque 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
});

"input" funcionó para mí.

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

Usted podría utilizar los keydown, keyupy keypresseventos.

Para realizar un seguimiento de cada uno, intente este ejemplo y, antes de eso, reduzca completamente 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: el evento se genera al salir

onchange: el evento se genera al salir si se realiza algún cambio en inputtext

onkeydown: el evento se genera al presionar cualquier tecla (también para mantener pulsadas las teclas durante mucho tiempo)

onkeyup: el evento se genera en cualquier lanzamiento de tecla

onkeypress: igual que onkeydown (o onkeyup) pero no reaccionará para ctrl, backsace, alt other

2018 aquí, esto es lo que hago:

$(inputs).on('change keydown paste input propertychange click keyup blur',handler);

Si puede señalar fallas en este enfoque, le agradecería.

Método 1: agregue un detector de eventos para input:

element.addEventListener("input", myFunction);

Método 2: definir la oninputpropiedad con JavaScript:

element.oninput = function()
{
    myFunction();
};

Método 3: definir la oninputpropiedad con HTML:

<input type="text" oninput="myFunction();">

Robert Siemer addEventListener no es compatible con IE8.

"Las versiones anteriores de IE admitían un método equivalente y exclusivo de EventTarget.attachEvent ()". https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener