Der beste Weg, um onchange-as-you-type in Eingangstyp = "Text" zu verfolgen?

Question

Meiner Erfahrung nach tritt input type="text"onchange Ereignis normalerweise nur auf, nachdem Sie (blur) die Kontrolle verlassen haben.

Gibt es eine Möglichkeit, Browser zu zwingen, onchange jedes Mal textfield Inhaltsänderungen auszulösen? Wenn nicht, was ist der eleganteste Weg, dies "manuell" zu verfolgen?

Die Verwendung von onkey* Ereignisse ist nicht zuverlässig, da Sie mit der rechten Maustaste auf das Feld klicken und Einfügen auswählen können. Dadurch wird das Feld ohne Tastatureingabe geändert.

Ist setTimeout der einzige Weg? .. hässlich :-)

Answer 1

Update:

Siehe Another answer (2015).

---

Original-2009 Antwort:

Also, wollen Sie das onchange Ereignis auf keydown abzufeuern, verschwimmen, und Paste? Das ist Magie.

Wenn Sie Änderungen während der Eingabe verfolgen möchten, verwenden Sie "onkeydown". Wenn Sie die Pastenoperationen mit der Maus abfangen müssen, verwenden Sie "onpaste" (IE, FF3) und "oninput" (FF, Opera, Chrome, Safari).

_{Gebrochen für <textarea> auf Safari. Verwenden Sie textInput statt}

Answer 2

könnten Sie verwenden die keydown, keyup und keypress sowie Veranstaltungen.

Answer 3

Ich hatte eine ähnliche Anforderung (twitter style Textfeld). Verwendet onkeyup und onchange. onchange kümmert sich tatsächlich um Mauspastenoperationen während des verlorenen Fokus vom Feld.

[Update] In HTML5 oder höher, verwenden Sie oninput, um Echtzeit-Zeichenmodifikationen zu erhalten, wie in anderen Antworten oben erläutert.

Answer 4

onkeyup geschieht, nachdem Sie zum Beispiel vom Typ I t drücken, wenn ich mit dem Finger der Aktion geschieht aber auf keydown die Aktion heben passiert, bevor ich Ziffer des Charakter t

Hope this hilfreich für jemanden.

Also onkeyup ist besser für wenn Sie senden möchten, was Sie gerade jetzt eingegeben haben.

Answer 5

Wenn Sie den Internet Explorer verwenden NUR, können Sie diese verwenden:

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

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

Hoffnung, das hilft.

Answer 6

eine ganz in der Nähe von Lösung ist (natürlich nicht alle Paste Wege nicht reparieren), aber die meisten von ihnen:

Es Eingänge als auch für Textbereiche funktioniert:

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

wie folgt tun:

Wie ich schon sagte, nicht alle Wege zu Paste ein Ereignis auf allen Browsern Feuer ... am schlimmsten einige schießen überhaupt kein Ereignis, aber Timer sind schrecklich für solche verwendet werden.

Die meisten Einfügeoptionen werden jedoch mit Tastatur und/oder Maus ausgeführt, so dass normalerweise ein onkeyup oder onmouseup nach dem Einfügen ausgelöst werden, auch onkeyup wird beim Tippen auf der Tastatur ausgelöst.

Stellen Sie sicher, dass der Prüfcode nicht viel Zeit in Anspruch nimmt ... anderenfalls erhalten die Benutzer einen schlechten Eindruck.

Ja, der Trick besteht darin, auf Schlüssel und auf Maus ... aber Vorsicht beide können gefeuert werden, so beachten Sie solche !!!

Answer 7

Javascript ist unberechenbar und lustig hier.

• onchange tritt nur, wenn Sie die Textbox
• onkeyup & onkeypress Unschärfe tritt nicht immer auf den Text ändern
• onkeydown auf Textänderung auftritt (kann aber nicht & Paste mit Mausklick geschnitten Spur)
• onpaste & oncut tritt mit Tastendruck und sogar mit der Maus mit der rechten Maustaste.

Also, die Änderung in der Textbox zu verfolgen, müssen wir onkeydown, oncut und onpaste. Wenn Sie bei dem Rückruf dieses Ereignisses den Wert des Textfelds überprüfen, erhalten Sie den aktualisierten Wert nicht, da der Wert nach dem Rückruf geändert wird. Eine Lösung hierfür besteht darin, eine Zeitüberschreitungsfunktion mit einer Zeitüberschreitung von 50 Millisekunden (oder weniger) einzurichten, um die Änderung zu verfolgen.

Dies ist ein schmutziger Hack, aber das ist der einzige Weg, wie ich recherchiert habe.

Hier ist ein Beispiel. http://jsfiddle.net/2BfGC/12/

Answer 8

Bitte, Richter nächsten Ansatz mit 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 diesen Tagen hören für oninput. Es fühlt sich an wie onchange ohne den Fokus auf das Element zu verlieren. Es ist HTML5.

Es wird von allen (auch mobil) unterstützt, außer IE8 und darunter. Für IE hinzufügen onpropertychange.Ich verwende es so:

<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

"Eingang" arbeitete für mich.

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

Answer 11

Below Code funktioniert für mich mit JQuery feinen 1.8.3

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

Javascript/JQuery:

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

Answer 12

Jedem dieses Beispiel zu verfolgen versuchen und davor vollständig Reduziere die Cursorblinkrate auf Null.

<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: Ereignis erzeugt beim Ausleiten

Onchange: Ereignis beim Austritt erzeugt, wenn irgendwelche in Input Änderungen

onkeydown: Ereignis auf jedem Tastendruck generiert (für Schlüssel hält auch mal lange)

onkeyup: event generiert bei beliebigem Schlüssel release

onkeypress: wie onkeydown (oder onkeyup) aber für ctrl, backsace, alt nicht reagieren andere