Der beste Weg, um eine Änderung während der Eingabe in input type = "text" zu verfolgen?

449

Nach meiner Erfahrung tritt das input type="text" onchangeEreignis normalerweise erst auf, nachdem Sie blurdie Steuerung verlassen ( ) haben.

Gibt es eine Möglichkeit, den Browser bei onchangejeder textfieldÄnderung des Inhalts zum Auslösen zu zwingen ? Wenn nicht, wie lässt sich dies am elegantesten „manuell“ verfolgen?

Die Verwendung von onkey*Ereignissen 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 setTimeoutder einzige Weg? .. Hässlich :-)

Ilya Birman
quelle
@Ist es eine Chance, dass Sie Ihre akzeptierte Antwort aktualisieren, damit die veraltete nicht oben angeheftet wird?
Flimm

Antworten:

271

Aktualisieren:

Siehe eine andere Antwort (2015).


Original 2009 Antwort:

Sie möchten also, dass das onchangeEreignis auf Keydown, Unschärfe und Einfügen ausgelöst wird? Das ist Magie.

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

1 Auf Safari gebrochen <textarea>. Verwenden Sie textInputstattdessen

Halbmond frisch
quelle
22
onkeypresssollte anstelle von verwendet werden onkeydown. onkeydownwird ausgelöst, wenn eine Taste gedrückt wird. Wenn ein Benutzer eine Taste gedrückt hält, wird das Ereignis für das erste Zeichen nur einmal ausgelöst. onkeypresswird ausgelöst, wenn dem Textfeld ein Zeichen hinzugefügt wird.
Fent
61
Es ist nicht ganz magisch, onchangeall diese Aktionen in Brand zu setzen. <input onchange="doSomething();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">wird für die meisten gut genug tun.
Aroth
1
Was ist mit dem Löschen von Text im Eingabefeld mit der Maus? Ich denke nicht, dass das funktionieren wird.
Jeevan
47
Mit jquery 1.8.3 sieht es so aus:$().on('change keydown paste input', function() {})
Narfanator
4
@AriWais: JA, omg der größte Teil von SO sollte veraltet sein. Leute, diese Antwort ist 8 Jahre alt . Ich wünschte, es gäbe einen "veralteten" Button für alte Antworten wie diese, und die Community könnte die bessere auswählen.
Crescent Fresh
658

In diesen Tagen hören auf oninput. Es fühlt sich an, onchangeals müsste man nicht den Fokus auf das Element verlieren. Es ist HTML5.

Es wird von allen (auch von Mobilgeräten) unterstützt, außer IE8 und niedriger. Für IE hinzufügen onpropertychange. Ich benutze es so:

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>

Robert Siemer
quelle
63
In einer sich ständig verändernden Welt wie den Webstandards kann sich die akzeptierte Antwort manchmal nach einigen Jahren ändern ... Dies ist die neue akzeptierte Antwort für mich.
Erick Petrucelli
1
Die Unterstützung für oninputselbst in IE9 ist jedoch teilweise ( caniuse.com/#feat=input-event ).
Kenston Choi
Es kann sich lohnen, innerTextanstelle von zu verwenden, innerHTMLdamit kein Markup gerendert wird
Jeevan Takhar,
47

Der folgende Code funktioniert gut mit Jquery 1.8.3

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

Javascript / JQuery:

$("#myId").on('change keydown paste input', function(){
      doSomething();
});
Amrit Pal Singh
quelle
11
Die jQuery- Bibliothek ist in der Frage nicht markiert.
John Weisz
21
Jquery ist eine Javascript-API, und ich wurde durch eine Suche mit dem Jquery-Schlüsselwort hierher gebracht. Ich denke nicht, dass es sich lohnt, für jede Javascript-Frage eine neue Frage für die Jquery-Antwort zu erstellen ...
GaelDev
12
Wenn die Leute nicht die Verwendung von Bibliotheken in Antworten
vorschlagen dürften,
3
Feuert mehrmals. Wahrscheinlich aufgrund von Änderungen und Keydown. Eine wahrscheinliche Eingabe wird nur hier benötigt.
mmm
1
Sie benötigen das nicht, keydownda es den Wert der Eingabe dupliziert. Entfernen Sie ihn.
Youssef Al Subaihi
43

Javascript ist hier unvorhersehbar und lustig.

  • onchange tritt nur auf, wenn Sie das Textfeld verwischen
  • onkeyup& onkeypresstritt nicht immer bei Textänderungen auf
  • onkeydown tritt bei Textänderung auf (kann jedoch das Ausschneiden und Einfügen nicht mit einem Mausklick verfolgen)
  • onpaste& oncuttritt mit Tastendruck und sogar mit der rechten Maustaste auf.

Also, um die Änderung in der Textbox zu verfolgen, müssen wir onkeydown, oncutund onpaste. Wenn Sie im 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 Timeout-Funktion mit einem Timeout von 50 Millisekunden (oder weniger) festzulegen, um die Änderung zu verfolgen.

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

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

Sanket Sahu
quelle
4
oninputund textInputsind die Ereignisse, die die eigentliche Lösung dafür sind, aber nicht von allen Browsern unterstützt werden.
Sanket Sahu
Für den zweiten Punkt nehme ich an, Sie meinten onkeyupund onkeydown, die ähnlich sind. Beide können Strg-, Alt-, Umschalt- und Metatasten erfassen. Für den dritten Punkt nehme ich an, dass Sie gemeint haben onkeypress.
Daniel Stevens
12

onkeyuppassiert, nachdem Sie zum Beispiel getippt haben. Ich drücke, twenn ich den Finger hebe, passiert die Aktion, aber bei keydownder Aktion geschieht, bevor ich das Zeichen digitalisieret

Hoffe das ist hilfreich für jemanden.

Es onkeyupist also besser, wenn Sie das senden möchten, was Sie gerade eingegeben haben.

Fernando André
quelle
8

Ich hatte eine ähnliche Anforderung (Textfeld im Twitter-Stil). Gebraucht onkeyupund onchange. onchangekümmert sich tatsächlich um Maus-Einfügevorgänge bei verlorenem Fokus aus dem Feld.

[Update] Verwenden Sie oninputin HTML5 oder höher, um Aktualisierungen von Zeichenänderungen in Echtzeit abzurufen, wie in anderen Antworten oben erläutert.

Mohnish
quelle
Die Eingabe ist nützlich, wenn Sie erkennen möchten, wann sich der Inhalt eines Textbereichs, einer Eingabe: Text, einer Eingabe: eines Kennworts oder einer Eingabe: eines Suchelements geändert hat, da das Ereignis onchange für diese Elemente ausgelöst wird, wenn das Element den Fokus verliert, und nicht unmittelbar nach der Änderung .
Hkasera
@hkasera Ja, mit HTML5 oninputist der richtige Weg. Aber als ich es implementierte, existierte HTML5 nicht und wir hatten IE 8 :(. Ich schätze Ihr Update, da es aktuelle Informationen für Benutzer
bereitstellt
7

Wenn Sie NUR Internet Explorer verwenden, können Sie Folgendes verwenden:

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

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

Ich hoffe, das hilft.

RolandDeschain
quelle
8
Könnte für ein Inhouse-Projekt sein, denke ich ... :)
Eselk
94
Gott sei Dank lebe ich nicht in diesem Haus! : D
Marco Matarazzi
13
Vor 10 Jahren würde dieser Satz nichts Lustiges enthalten .. :(
Michał Tabor
4
Für mich hilft dies, ich entwickle ein Projekt für ein Handy mit einem eingebetteten Betriebssystem, in dem der IE der einzige Browser ist.
Anders M.
3
Wenn Sie NUR Internet Explorer - LOL verwenden. Machte meinen Tag im Jahr 2016!
Jack Black
4

Es gibt eine ziemlich nahe Lösung (nicht alle Einfügemöglichkeiten korrigieren), aber die meisten davon:

Es funktioniert sowohl für Eingaben als auch für Textbereiche:

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

Mach das so:

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

Wie gesagt, nicht alle Möglichkeiten zum Einfügen lösen ein Ereignis in allen Browsern aus ... schlimmstenfalls lösen einige überhaupt kein Ereignis aus, aber Timer sind schrecklich, um für solche verwendet zu werden.

Die meisten Einfügemethoden werden jedoch mit Tastatur und / oder Maus ausgeführt. Daher wird normalerweise nach dem Einfügen ein Onkeyup oder Onmouseup ausgelöst. Beim Tippen auf der Tastatur wird auch Onkeyup ausgelöst.

Stellen Sie sicher, dass Ihr Prüfcode nicht viel Zeit in Anspruch nimmt. Andernfalls erhält der Benutzer einen schlechten Eindruck.

Ja, der Trick besteht darin, auf Schlüssel und Maus zu feuern ... aber Vorsicht, beide können abgefeuert werden, denken Sie also daran !!!

z666zz666z
quelle
4

Bitte beurteilen Sie den 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
});
Alex Uke
quelle
Ich benutze den gleichen Weg
:)
Mir ist klar, dass dies nicht die neueste Antwort ist, aber würde das Verwischen und erneute Fokussieren der Eingabe bei jedem Tastendruck die Cursorposition nicht beeinträchtigen, wenn sie irgendwo anders als am Ende der Eingabe wäre?
Michael Martin-Smucker
@ MichaelMartin-Smucker Sie würden so denken, aber anscheinend nicht: jsfiddle.net/gsss8c6L
Clonkex
4

"Eingabe" hat bei mir funktioniert.

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

Sie könnten die Verwendung keydown, keyupund keypressEreignisse als auch.

Gumbo
quelle
3

Um jeden zu verfolgen, versuchen Sie dieses Beispiel und reduzieren Sie zuvor die Cursor-Blinkrate vollständig 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 wird beim Beenden generiert

onchange: Ereignis wird beim Beenden generiert, wenn Änderungen im Eingabetext vorgenommen werden

onkeydown: Ereignis wird bei jedem Tastendruck generiert (auch für langes Halten von Tasten)

onkeyup: Ereignis wird bei jeder Schlüsselfreigabe generiert

onkeypress: Wie onkeydown (oder onkeyup), reagiert jedoch nicht auf Strg, Backsace oder andere

Venkat
quelle
1

2018 hier, das mache ich:

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

Wenn Sie auf Mängel in diesem Ansatz hinweisen können, wäre ich Ihnen dankbar.

a20
quelle
2
2019 hier, und dies wird mehrmals für jeden Tastendruck ausgelöst. Ein Beispiel finden Sie hier: jsfiddle.net/sp00n82/3r4691tq/5
sp00n
1

Methode 1: Fügen Sie einen Ereignis-Listener hinzu für input:

element.addEventListener("input", myFunction);

 

Methode 2: Definieren Sie die oninputEigenschaft mit JavaScript:

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

 

Methode 3: Definieren Sie die oninputEigenschaft mit HTML:

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

Robert Siemer addEventListener wird in IE8 nicht unterstützt.

"Ältere Versionen des IE unterstützten eine äquivalente, proprietäre EventTarget.attachEvent () -Methode." https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener

bpolelli
quelle
Dies ist eher ein Kommentar zu einer vorhandenen Antwort als eine neue Antwort
Slfan