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

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

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 ¹ ).

¹ _{Auf Safari gebrochen <textarea>. Verwenden Sie textInputstattdessen}

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>

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

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/

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.

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.

Ich denke, 2018 ist es besser, die inputVeranstaltung zu nutzen .

- -

Wie die WHATWG-Spezifikation beschreibt ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ):

Wird an Steuerelementen ausgelöst, wenn der Benutzer den Wert ändert (siehe auch die Änderungsereignis ).

- -

Hier ist ein Beispiel für die Verwendung:

<input type="text" oninput="handleValueChange()">

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.

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

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

"Eingabe" hat bei mir funktioniert.

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

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

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

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.

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();">

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