wake-up-neo.net

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

Nach meiner Erfahrung tritt das input type="text"onchange-Ereignis normalerweise nur auf, nachdem Sie das Steuerelement (blur) verlassen haben.

Gibt es eine Möglichkeit, den Browser zu zwingen, onchange bei jeder Änderung von textfield-Inhalten auszulösen? Wenn nicht, was ist der eleganteste Weg, dies manuell zu 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 Tastatureingaben geändert.

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

360
Ilya Birman

Update:

Siehe Eine weitere Antwort (2015).


Original 2009 Answer:

Das onchange-Ereignis soll also beim Keydown ausgelöst werden, verwischen, und einfügen? Das ist magie.

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

1Auf Safari wegen <textarea> gebrochen. Verwenden Sie stattdessen textInput

232
Crescent Fresh

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>

516
Robert Siemer

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();
});
41
Amrit Pal Singh

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/

37
Sanket Sahu

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.

9
Fernando André

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.

8
Mohnish

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.

7
RolandDeschain

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()">
4
Patrick H.

"input" hat für mich gearbeitet. 

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

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

4
z666zz666z

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
});
4
Alex Uke

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

3
Venkat

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

3
Gumbo

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.

1
a20

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

0
bpolelli