Il modo migliore per tracciare onchange mentre digiti in input type = "text"?

Nella mia esperienza, l' input type="text" onchangeevento di solito si verifica solo dopo aver lasciato ( blur) il controllo.

C'è un modo per forzare l'attivazione del browser onchangeogni volta che textfieldcambiano i contenuti? In caso contrario, qual è il modo più elegante per tracciare questo "manualmente"?

L'uso degli onkey*eventi non è affidabile, poiché è possibile fare clic con il pulsante destro del mouse sul campo e scegliere Incolla e questo cambierà il campo senza alcun input da tastiera.

È setTimeoutl'unico modo? .. Brutto :-)

Aggiornare:

Vedi un'altra risposta (2015).

Risposta originale 2009:

Quindi, vuoi che l' onchangeevento si attivi su keydown, sfocatura e incolla? Questa è magia.

Se si desidera tenere traccia delle modifiche durante la digitazione, utilizzare "onkeydown". Se devi intercettare le operazioni di incolla con il mouse, usa "onpaste"( IE , FF3 ) e "oninput"( FF, Opera, Chrome, Safari ¹ ).

¹ _{rotto per <textarea>Safari. Usa textInputinvece}

In questi giorni ascoltate oninput. Sembra onchangesenza la necessità di perdere la concentrazione sull'elemento. È HTML5.

È supportato da tutti (anche da dispositivi mobili), tranne IE8 e versioni precedenti. Per IE aggiungere onpropertychange. Lo uso così:

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>

Di seguito il codice funziona bene per me con Jquery 1.8.3

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

JavaScript / JQuery:

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

Javascript è imprevedibile e divertente qui.

• onchange si verifica solo quando si sfoca la casella di testo
• onkeyupe onkeypressnon si verifica sempre al cambio di testo
• onkeydown si verifica sulla modifica del testo (ma non è possibile tenere traccia di taglia e incolla con il clic del mouse)
• onpastee si oncutverifica con la pressione dei tasti e anche con il tasto destro del mouse.

Così, per tenere traccia il cambiamento di testo, abbiamo bisogno onkeydown, oncute onpaste. Nel callback di questi eventi, se si controlla il valore della casella di testo, non si ottiene il valore aggiornato poiché il valore viene modificato dopo il callback. Quindi una soluzione per questo è impostare una funzione di timeout con un timeout di 50 mili-secondi (o potrebbe essere inferiore) per tenere traccia della modifica.

Questo è un trucco sporco ma questo è l'unico modo, come ho studiato.

Ecco un esempio http://jsfiddle.net/2BfGC/12/

onkeyupaccade dopo aver digitato, ad esempio, premo tquando sollevo il dito, l'azione si verifica ma keydownsull'azione si verifica prima di digitare il personaggiot

Spero che questo sia utile per qualcuno.

Quindi onkeyupè meglio per quando vuoi inviare ciò che hai appena digitato ora.

Avevo un requisito simile (campo di testo in stile twitter). Usato onkeyupe onchange. onchangein realtà si occupa delle operazioni di incolla del mouse durante la messa a fuoco persa dal campo.

[Aggiorna] In HTML5 o versioni successive, utilizza oninputper ottenere aggiornamenti in tempo reale sulla modifica dei caratteri, come spiegato nelle altre risposte sopra.

Penso che nel 2018 sia meglio usare l' inputevento.

-

Come descrive la specifica WHATWG ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ):

Infornato ai controlli quando l'utente modifica il valore (vedere anche l' evento change )

-

Ecco un esempio di come usarlo:

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

Se si utilizza SOLO Internet Explorer, è possibile utilizzare questo:

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

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

Spero che aiuti.

c'è una soluzione abbastanza vicina (non aggiustare tutti i modi Incolla) ma la maggior parte di essi:

Funziona per input e per textareas:

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

Fai così:

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

Come ho detto, non tutti i modi per incollare un evento su tutti i browser ... peggio alcuni non attivano alcun evento, ma i timer sono orribili da usare per questo.

Ma la maggior parte dei modi Incolla viene eseguita con tastiera e / o mouse, quindi normalmente un onkeyup o onmouseup vengono attivati ​​dopo un incolla, anche onkeyup viene attivato quando si digita sulla tastiera.

Assicurati che il tuo codice di controllo non richieda molto tempo ... altrimenti l'utente avrà un'impressione scadente.

Sì, il trucco è sparare con il tasto e con il mouse ... ma attenzione, entrambi possono essere attivati, quindi ricordati di questo !!!

Per favore, giudica il prossimo approccio 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" ha funzionato per me.

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

È possibile utilizzare i keydown, keyuped keypresseventi come bene.

Per tracciare ciascuno, prova questo esempio e prima di tutto riduci completamente il tasso di lampeggiamento del cursore a zero.

<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: l'evento viene generato all'uscita

onchange: l'evento genera all'uscita se vengono apportate modifiche in inputtext

onkeydown: l'evento si genera alla pressione di qualsiasi tasto (anche per tenere premuto il tasto per molto tempo)

onkeyup: l'evento viene generato su qualsiasi rilascio chiave

onkeypress: uguale a onkeydown (o onkeyup) ma non reagisce per ctrl, backsace, alt altro

2018 qui, questo è quello che faccio:

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

Se potessi evidenziare difetti in questo approccio, te ne sarei grato.

Metodo 1: aggiungere un listener di eventi per input:

element.addEventListener("input", myFunction);

Metodo 2: definire la oninputproprietà con JavaScript:

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

Metodo 3: definire la oninputproprietà con HTML:

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

Robert Siemer addEventListener non è supportato in IE8.

"Le versioni precedenti di IE supportavano un metodo EventTarget.attachEvent () equivalente e proprietario." https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener