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


313

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

204

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

  0

Non hai controllato oninput in IE (non ce l'ho su un Mac)? Perché il controllo dell'inserimento stesso non è sufficiente: puoi selezionare e tagliare, ad esempio. Grazie. 22 feb. 092009-02-22 20:32:53

+14

'onkeypress' dovrebbe essere usato al posto di' onkeydown'. 'onkeydown' si attiva quando si fa clic su una chiave. Se un utente tiene premuto un tasto, l'evento scatterà una sola volta per il primo carattere. 'onkeypress' si attiva ogni volta che un carattere viene aggiunto al campo di testo. 12 mar. 122012-03-12 17:22:36

+50

Non è abbastanza magico fare il fuoco "onchange" su tutte quelle azioni. '<input onchange =" doSomething(); " onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();"> 'farà abbastanza bene per la maggior parte. 25 apr. 122012-04-25 11:09:18

  0

Cosa ne pensi di eliminare del testo nella casella di input usando il mouse? Non penso che funzionerà. 27 ago. 122012-08-27 06:49:42

+1

Sono d'accordo con @DeaDEnD. In effetti, penso che il trio di eventi 'input' +' onpropertychange' + 'onkeypress' sia migliore di' input' + 'onpaste' +' onkeydown'. 'onpropertychange' è la controparte di IE per' 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, assomiglia a: '$(). On ('cambia input input keydown', function() {})' 01 giu. 132013-06-01 22:34:13

+16

Usa onkeyup per ottenere il testo DOPO che il testo modificato ... 11 dic. 132013-12-11 11:23:43

  0

se si utilizza 'onkeydown' potrebbe essere una buona idea controllare' .isChar' e filtrare i valori '.key' come' 'Shift'', '' Control'', ecc ... 25 nov. 142014-11-25 04:28:56

  0

It potrebbe valere la pena notare che, secondo le specifiche, l'onpaste è cancellabile, mentre oninput non lo è. 06 ago. 152015-08-06 08:40:51

+1

Fare riferimento alla risposta di @ Robert-Siemer di seguito. Dovrebbe essere la nuova risposta accettata. 01 feb. 162016-02-01 23:19:01

  0

@MaxPMagee: yaar dovrebbe. Stack è una tale terra desolata di informazioni obsolete in questi giorni. Ho aggiornato questa risposta per fare riferimento [alla risposta di RobertSiemer] (http://stackoverflow.com/a/26202266/45433). Non ho tempo per controllare le mie risposte di 7 anni, quindi grazie per averlo portato alla mia attenzione! 02 feb. 162016-02-02 15:20:38

  0

Questa risposta è DEPRECATED ... guarda la risposta di Robert Siemer è quella moderna e di gran lunga migliore 02 apr. 172017-04-02 21:36:09

+1

@AriWais: SÌ, la maggior parte di SO dovrebbe essere deprecata. Gente questa risposta è * 8 anni *. Vorrei che ci fosse un pulsante "deprecato" per vecchie risposte come questa, e la comunità potrebbe scegliere la migliore. 03 apr. 172017-04-03 14:48:14


3

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


5

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.

  0

L'oninput è utile se vuoi rilevare quando il contenuto di una textarea, input: text, input: password o input: l'elemento search è cambiato, perché l'evento onchange su questi elementi si attiva quando l'elemento perde lo stato attivo, non immediatamente dopo modifica. 04 mag. 122012-05-04 08:59:28

  0

@hkasera Sì, con HTML5 'oninput' è la strada da percorrere. Ma, quando ho implementato, HTML5 non esisteva e avevamo IE 8 :(. Apprezzo il tuo aggiornamento in quanto fornisce informazioni aggiornate per gli utenti. 08 mag. 142014-05-08 18:47:38


7

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.


6

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.

+131

"Se si utilizza SOLO Internet Explorer" ???? :) 30 set. 112011-09-30 13:18:55

+6

Potrebbe essere per un progetto interno, suppongo ... :) 12 dic. 122012-12-12 21:23:21

+79

Grazie a dio non vivo in quella casa! : D 03 apr. 132013-04-03 14:42:09

+9

10 anni fa non ci sarebbe nulla di divertente in questa frase .. :( 16 mar. 142014-03-16 16:26:19

+3

per me questo aiuta, sto sviluppando un progetto per alcuni dispositivi mobili con un sistema operativo integrato dove IE è l'unico browser. 22 set. 142014-09-22 11:47:03

+1

Se si utilizza SOLO Internet Explorer - LOL. Ha reso la mia giornata nel 2016! 07 ott. 162016-10-07 13:55:05


4

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


30

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/

+3

'oninput' e' textInput' sono gli eventi che sono la soluzione effettiva per questo, ma non sono supportati da tutti i browser. 05 lug. 122012-07-05 06:59:38

+1

grazie per aver menzionato 'oncut' 19 nov. 142014-11-19 05:15:11

  0

Per il secondo punto suppongo che intendessi 'onkeyup' e' onkeydown', che sono simili.Entrambi possono catturare i tasti Ctrl, Alt, Shift e Meta. Per il terzo punto puntato presumo tu intendessi 'onkeypress'. 22 feb. 182018-02-22 14:56:49


2

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 
}); 
  0

Io uso allo stesso modo:) 25 giu. 152015-06-25 18:26:21

  0

Mi rendo conto che questa non è la risposta più recente, ma non sarebbe sfocata e ri-focalizzando l'input su ogni keyup rovinare il posizionamento del cursore se fosse ovunque tranne la fine dell'input? 02 mag. 172017-05-02 16:26:04

  0

@ MichaelMartin-Smucker Lo penseresti, ma a quanto pare non lo è: https://jsfiddle.net/gsss8c6L/ 04 lug. 172017-07-04 03:31:46


395

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

In un mondo in continua evoluzione come gli standard Web, a volte la risposta accettata potrebbe essere cambiata dopo alcuni anni ... Questa è la nuova risposta accettata per me. 25 nov. 152015-11-25 15:50:08


3

"input" ha funzionato per me.

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

26

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

La libreria jQuery ** ** non è codificata nella domanda. 16 feb. 152015-02-16 21:03:48

+12

Jquery è una API Javascript, e sono stato portato qui da una ricerca con la parola chiave Jquery, non penso che valga la pena creare una nuova domanda per ogni javascript qustion per la risposta di Jquery ... 27 mag. 152015-05-27 12:12:49

+5

Se le persone non potevano suggerire l'uso delle librerie nelle risposte ci sarebbero MOLTE ALTRE domande senza risposta su SO 17 dic. 152015-12-17 03:01:24

  0

Incendi più volte. Probabilmente a causa di modifiche e keydown. L'input probabile è necessario solo qui. 01 set. 172017-09-01 11:09:32


2

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