Il modo migliore per tracciare onchange as-you-type in input type = "text"?

Question

Nella mia esperienza, l'evento input type="text"onchange si verifica in genere solo dopo aver lasciato il controllo (blur).

C'è un modo per forzare il browser per attivare onchange ogni volta textfield modifiche di contenuto? In caso contrario, qual è il modo più elegante per tracciare questo "manualmente"?

L'utilizzo degli eventi onkey* 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.

È setTimeout l'unico modo? .. :-) Ugly

Answer 1

Aggiornamento:

Vedi Another answer (2015).

---

originale 2009 Risposta:

Quindi, si desidera che l'evento onchange al fuoco su keydown, sfocatura, e pasta? Questa è magia.

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

_{rotto per <textarea> su Safari. Utilizzare textInput invece}

Answer 2

Si potrebbe utilizzare gli eventi keydown, keyup e keypress pure.

Answer 3

Avevo un requisito simile (campo di testo stile twitter). Usato onkeyup e onchange. onchange si occupa effettivamente delle operazioni di incolla del mouse durante la perdita di messa a fuoco dal campo.

[Aggiornamento] In HTML5 o versioni successive, utilizzare oninput per ottenere aggiornamenti della modifica dei caratteri in tempo reale, come spiegato in altre risposte sopra.

Answer 4

onkeyup accade dopo aver digitato per esempio premo t quando alzo il dito l'azione accade, ma sul keydown l'azione avviene prima cifra del carattere t

Spero che questo è utile per qualcuno.

Quindi onkeyup è migliore per quando si desidera inviare ciò che hai appena digitato ora.

Answer 5

se si usa 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> 

Speranza che aiuta.

Answer 6

c'è una soluzione abbastanza vicino (non risolvere tutti i modi e incolla), ma la maggior parte di loro:

Si lavora per gli ingressi e per textarea:

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

fare in questo modo:

Come ho già detto, non tutti i modi per Incollare attivano un evento su tutti i browser ... peggio che alcuni non generino alcun evento, ma i Timer sono orribili per essere utilizzati.

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

Assicurati che il tuo codice di controllo non impieghi molto tempo ... altrimenti l'utente ottiene una scarsa impressione.

Sì, il trucco è quello di sparare sulla chiave e sul mouse ... ma attenzione entrambi possono essere sparati, quindi tenete a mente tale !!!

Answer 7

Javascript è imprevedibile e divertente qui.

• onchange verifica solo quando si sfocatura box
• onkeyup & onkeypress non sempre si verifica sui cambiamenti testo
• onkeydown verifica sul cambiamento del testo (ma non in grado di monitorare tagliare & pasta con un clic del mouse)
• onpaste & oncut si verifica con la pressione di un tasto e anche con il tasto destro del mouse.

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

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

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

Answer 8

prega, giudice approccio prossimo utilizzando 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 
}); 

Answer 9

In questi giorni ascoltano per oninput. Sembra onchange senza la necessità di perdere la concentrazione sull'elemento. È HTML5.

È supportato da tutti (anche mobili), tranne IE8 e seguenti. Per IE aggiungere onpropertychange.Lo uso in questo modo:

<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> 

Answer 10

"input" ha funzionato per me.

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

Answer 11

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

Answer 12

di monitorare ogni provare questo esempio, e prima ancora del tutto ridurre la frequenza del lampeggio 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: evento genera all'uscita

onchange: evento genera in uscita se eventuali modifiche effettuate inputText

onkeydown: evento genera su una qualsiasi pressione di un tasto (per la chiave tenendo lunghi tempi anche)

onkeyup: evento generato su qualsiasi rilascio chiave

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