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


313

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

204

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

  0

Haben nicht Sie überprüft, in IE oninput (Sie haben es nicht auf einem Mac)? Weil das Überprüfen auf Paste selbst nicht genug ist: Sie können zum Beispiel wählen und schneiden. Vielen Dank. 22 feb. 092009-02-22 20:32:53

+14

'onkeypress' sollte anstelle von' onkeydown' verwendet werden. 'onkeydown' wird ausgelöst, wenn eine Taste gedrückt wird. Wenn ein Benutzer einen Schlüssel gedrückt hält, wird das Ereignis nur einmal für das erste Zeichen ausgelöst. 'onkeypress' wird ausgelöst, wenn ein Char zum Textfeld hinzugefügt wird. 12 mär. 122012-03-12 17:22:36

+50

Es ist nicht wirklich magisch, 'onchange' Feuer auf all diese Aktionen zu machen. '<input onchange =" doSomething(); " onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();"> 'wird für die meisten gut genug sein. 25 apr. 122012-04-25 11:09:18

  0

Was ist mit dem Löschen von Text im Eingabefeld mit der Maus? Ich denke nicht, dass das funktionieren wird. 27 aug. 122012-08-27 06:49:42

+1

Ich stimme @DeaDEnD zu. Tatsächlich denke ich, dass das Trio der Ereignisse "Input" + "onpropertychange" + "onkeypress" besser ist als "input" + "onpaste" + "onkeydown". 'onpropertychange' ist das Gegenstück von IE zu' input'. 25 dez. 122012-12-25 10:43:22

  0

'onkeyup' oder' onkeypress' 26 mär. 132013-03-26 15:52:01

+42

Mit jquery 1.8.3, sieht wie folgt aus: '$(). On ('keydown paste input', function() {})' 01 jun. 132013-06-01 22:34:13

+16

Mit onkeyup erhält man den Text NACH dem Text geändert ... 11 dez. 132013-12-11 11:23:43

  0

Wenn 'onkeydown' verwendet wird, kann es eine gute Idee sein, nach' .isChar' zu suchen und '.key' Werte wie' 'Shift'',' 'Control'', etc ... 25 nov. 142014-11-25 04:28:56

  0

It herauszufiltern Vielleicht ist es erwähnenswert, dass onpaste gemäß der Spezifikation kündbar ist, während onput nicht ist. 06 aug. 152015-08-06 08:40:51

+1

Siehe @ Robert-Siemers Antwort unten. Es sollte die neue akzeptierte Antwort sein. 01 feb. 162016-02-01 23:19:01

  0

@MaxPMagee: yaar sollte es. Der Stapel ist heutzutage so ein Ödland veralteter Information. Ich habe diese Antwort aktualisiert, um auf [@ RobertSiemers Antwort] (http://stackoverflow.com/a/26202266/45433) zu verweisen. Ich habe keine Zeit, meine 7 Jahre alten Antworten zu packen, also danke, dass du mich darauf aufmerksam gemacht hast! 02 feb. 162016-02-02 15:20:38

  0

Diese Antwort ist veraltet ... schauen Sie die Robert Siemer Antwort ist die moderne und viel bessere 02 apr. 172017-04-02 21:36:09

+1

@AriWais: JA, omg die meisten SO sollte veraltet sein. Leute diese Antwort ist * 8 Jahre alt *. Ich wünschte, es gäbe einen "veraltet" -Button für alte Antworten wie diesen, und die Community könnte den besseren wählen. 03 apr. 172017-04-03 14:48:14


3

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


5

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.

  0

Der oninput ist nützlich, wenn Sie erkennen möchten, wenn der Inhalt eines textarea, input: text, input: password oder input: search element sich geändert hat, weil das onchange - Ereignis auf diesen Elementen ausgelöst wird, wenn das Element den Fokus verliert, nicht unmittelbar nach dem Änderung. 04 mai. 122012-05-04 08:59:28

  0

@hkasera Ja, mit HTML5 ist oninput der richtige Weg. Aber, als ich implementiert habe, existierte HTML5 nicht und wir hatten IE 8 :(. Ich schätze dein Update, da es aktuelle Informationen für Benutzer zur Verfügung stellt. 08 mai. 142014-05-08 18:47:38


7

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.


6

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.

+131

"Wenn du NUR Internet Explorer benutzt" ???? :) 30 sep. 112011-09-30 13:18:55

+6

Könnte für ein Inhouse-Projekt sein, denke ich ... :) 12 dez. 122012-12-12 21:23:21

+79

Gott sei Dank, ich lebe nicht in diesem Haus! : D 03 apr. 132013-04-03 14:42:09

+9

Vor 10 Jahren würde es nichts komisches in diesem Satz .. :( 16 mär. 142014-03-16 16:26:19

+3

für mich das hilft, ich entwickle ein Projekt für irgendein Mobile mit einem eingebetteten OS, in dem IE der einzige Browser ist. 22 sep. 142014-09-22 11:47:03

+1

Wenn Sie NUR Internet verwenden Explorer - LOL Mein Tag im Jahr 2016 gemacht! 07 okt. 162016-10-07 13:55:05


4

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


30

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/

+3

'oninput' und' textInput' sind die Ereignisse, die die eigentliche Lösung dafür ist, aber es wird nicht von allen Browsern unterstützt. 05 jul. 122012-07-05 06:59:38

+1

danke für die Erwähnung von 'oncut' 19 nov. 142014-11-19 05:15:11

  0

Für die zweite Kugel Ich nehme an, Sie meinten "onkeyup" und "onkeydown", die ähnlich sind. Beide können Ctrl-, Alt-, Umschalt- und Meta-Tasten erfassen. Für den dritten Aufzählungspunkt nehme ich an, dass Sie "onkeypress" meinen. 22 feb. 182018-02-22 14:56:49


2

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

Ich benutze den gleichen Weg:) 25 jun. 152015-06-25 18:26:21

  0

Ich weiß, dies ist nicht die neueste Antwort, aber würde nicht verwischen und neu fokussieren die Eingabe auf jeder Tastenkombination vermasselt die Cursor-Platzierung, wenn es irgendwo war außer dem Ende der Eingabe? 02 mai. 172017-05-02 16:26:04

  0

@ MichaelMartin-Smucker Man könnte denken, aber anscheinend nicht: https://jsfiddle.net/gsss8c6L/ 04 jul. 172017-07-04 03:31:46


395

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

In einer sich ständig verändernden Welt wie der Web Standards ist, könnte manchmal die akzeptierte Antwort nach einigen Jahren geändert werden ... Dies ist die neue akzeptierte Antwort für mich. 25 nov. 152015-11-25 15:50:08


3

"Eingang" arbeitete für mich.

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

26

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

Die jQuery ** -Bibliothek ** ist in der Frage nicht markiert. 16 feb. 152015-02-16 21:03:48

+12

Jquery ist ein Javascript API, und ich wurde hier durch eine Suche mit Jquery Keyword gebracht, ich denke nicht, dass es sich lohnt, eine neue Frage für jede Javascript-Frage für die Jquery Antwort zu erstellen ... 27 mai. 152015-05-27 12:12:49

+5

Wenn Leute nicht vorschlagen dürfen die Verwendung von Bibliotheken in Antworten würde es viel mehr unbeantwortete Fragen auf SO 17 dez. 152015-12-17 03:01:24

  0

Brände mehrere Male. Wahrscheinlich wegen Änderung und Keydown. Wahrscheinliche Eingabe wird nur hier benötigt. 01 sep. 172017-09-01 11:09:32


2

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