Der beste Weg, um den On-Exchange-Typ als "Sie-Eingabe" zu erfassen, ist "input" = "text"?

Heutzutage auf oninput achten. Es fühlt sich wie onchange an, ohne dass der Fokus auf das Element verloren gehen muss. Es ist HTML5.

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

const $source = document.querySelector('#source');
const $result = document.querySelector('#result');

const typeHandler = function(e) {
  $result.innerHTML = e.target.value;
}

$source.addEventListener('input', typeHandler) // register for oninput
$source.addEventListener('propertychange', typeHandler) // for IE8
// $source.addEventListener('change', typeHandler) // fallback for Firefox for <select><option>, for <input> oninput is enough

<input id="source" />
<div id="result"></div>

Der folgende Code funktioniert für mich mit Jquery 1.8.3

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

Javascript/JQuery:

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

Javascript ist hier unberechenbar und lustig.

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

Um die Änderung im Textfeld zu verfolgen, benötigen wir onkeydown, oncut und onpaste. Wenn Sie im Rückruf dieser Ereignisse den Wert des Textfelds überprüfen, wird der aktualisierte Wert nicht angezeigt, da der Wert nach dem Rückruf geändert wird. Eine Lösung dafür ist, eine Timeout-Funktion mit einem Timeout von 50 Millisekunden (oder weniger) einzustellen, 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/

onkeyup geschieht nach der Eingabe. Ich drücke zum Beispiel t. Wenn ich den Finger anhebe, geschieht die Aktion. Bei keydown geschieht die Aktion, bevor ich das Zeichen t eingebe

Hoffe, das ist für jemanden hilfreich. 

onkeyup ist also besser für den Fall, dass Sie das gerade getippte senden möchten.

Ich hatte eine ähnliche Anforderung (Textfeld im Twitter-Stil). Verwendet onkeyup und onchange. onchange kümmert sich tatsächlich um Mauseinfügeoperationen, während der Fokus vom Feld verloren geht.

[Update] Verwenden Sie in HTML5 oder höher oninput, um Echtzeit-Änderungen an Zeichenänderungen zu erhalten, wie in den anderen Antworten oben erläutert.

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>

Hoffentlich hilft das.

Ich denke, im Jahr 2018 ist es besser, das Ereignis input zu verwenden.

-

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

Wird ausgelöst, wenn der Benutzer den Wert ändert (siehe auch Das change-Ereignis ).

-

Hier ist ein Beispiel, wie man es benutzt:

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

"input" hat für mich gearbeitet. 

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

es gibt eine ziemlich nahe Lösung (beheben Sie nicht alle Einfügewege), 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 eines Ereignisses auf allen Browsern. Am schlimmsten ist, dass manche Ereignisse überhaupt nicht ausgelöst werden, aber Timer sind fürchterlich.

Die meisten Einfügeverfahren werden jedoch mit Tastatur und/oder Maus ausgeführt. Normalerweise werden nach dem Einfügen ein Onkeyup oder ein Onmouseup ausgelöst. Beim Tastatureingabe wird auch Onkeyup ausgelöst.

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

Ja, der Trick besteht darin, mit der Taste und mit der Maus zu feuern ... aber beide können gefeuert werden, also denkt daran !!!

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

Um dies zu verfolgen, versuchen Sie dieses Beispiel und reduzieren Sie die Blinkrate des Cursors 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: Das Ereignis wird beim Beenden generiert, wenn Änderungen am Eingabetext vorgenommen wurden

onkeydown: Ereignis wird bei jedem Tastendruck generiert (auch für lange Haltezeiten)

onkeyup: Das Ereignis wird bei jeder Schlüsselfreigabe generiert

onkeypress: wie onkeydown (oder onkeyup), reagiert aber nicht auf Strg, Backsace oder andere

Sie können auch die Ereignisse keydown, keyup und keypress verwenden.

2018 hier, das mache ich:

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

Wenn Sie bei diesem Ansatz Mängel aufzeigen können, wäre ich Ihnen dankbar.

Robert Siemer addEventListener wird im IE8 nicht unterstützt.

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