Wie erhalte ich den neuen Wert einer HTML-Eingabe, nachdem ein Tastendruck sie geändert hat?

Lesezeit: 3 Minuten

Benutzer-Avatar
Paul Dixon

Ich habe ein HTML-Eingabefeld

<input type="text" id="foo" value="bar">

Ich habe einen Handler für die ‘Taste auf‘-Ereignis, aber wenn ich während des Ereignishandlers den aktuellen Wert des Eingabefelds abrufe, erhalte ich den Wert so, wie er war, und nicht so, wie er sein wird!

Ich habe versucht abzuholen ‘Tastendruck‘ und ‘Rückgeld‘Ereignisse, gleiches Problem.

Ich bin mir sicher, dass dies einfach zu lösen ist, aber derzeit denke ich, dass die einzige Lösung darin besteht, dass ich ein kurzes Timeout verwende, um einige Millisekunden in der Zukunft Code auszulösen!

Gibt es trotzdem die Möglichkeit, den aktuellen Wert während dieser Ereignisse zu erhalten?

BEARBEITEN: sieht so aus, als hätte ich ein Caching-Problem mit meiner js-Datei, da ich später denselben Code überprüft habe und es einwandfrei funktioniert hat. Ich würde die Frage löschen, bin mir aber nicht sicher, ob das an Reputation für die freundlichen Leute verliert, die Ideen gepostet haben 🙂

Benutzer-Avatar
Owen

Kannst du deinen Code posten? Ich finde kein Problem damit. Getestet auf Firefox 3.01/Safari 3.1.2 mit:

function showMe(e) {
// i am spammy!
  alert(e.value);
}
....
<input type="text" id="foo" value="bar" onkeyup="showMe(this)" />

  • Ich kam nach Hause, überprüfte meinen Code von Subversion und es funktionierte einwandfrei. Ich glaube, ich muss ein Caching-Problem mit der js-Datei gehabt haben und sie blieb bei der Handhabung von Tastendruck und nicht bei Tastendruck hängen. Schätzen Sie den Aufwand beim Schreiben von Beispielcode, also markieren Sie dies als Antwort 🙂

    – Paul Dixon

    21. Oktober 2008 um 20:08 Uhr

Ein geben modern Herangehensweise an diese Frage. Das funktioniert gut, inkl Strg+v. GlobalEventHandlers.oninput.

var onChange = function(evt) {
  console.info(this.value);
  // or
  console.info(evt.target.value);
};
var input = document.getElementById('some-id');
input.addEventListener('input', onChange, false);

Es gibt zwei Arten von Eingabewerten: Felder Eigentum und HTML des Feldes Attribut.

Wenn Sie keyup event und field.value verwenden, sollten Sie den aktuellen Wert des Felds erhalten. Dies ist nicht der Fall, wenn Sie field.getAttribute(‘value’) verwenden, das zurückgeben würde, was im HTML-Attribut (value=””) steht. Die Eigenschaft stellt dar, was in das Feld eingegeben wurde, und ändert sich während der Eingabe, während sich das Attribut nicht automatisch ändert (Sie können es mit der Methode field.setAttribute ändern).

<html>
    <head>
        <script>
        function callme(field) {
            alert("field:" + field.value);
        }
        </script>
    </head>
    <body>
        <form name="f1">
            <input type="text" onkeyup="callme(this);" name="text1">
        </form>
    </body>
</html>

Es sieht so aus, als könnten Sie das onkeyup verwenden, um die zu erhalten Neu Wert des HTML-Eingabesteuerelements. Ich hoffe es hilft.

Hier ist eine Tabelle mit den verschiedenen Ereignissen und den Ebenen der Browserunterstützung. Sie müssen ein Ereignis auswählen, das von mindestens allen modernen Browsern unterstützt wird.

Wie Sie der Tabelle entnehmen können, ist die keypress und change Ereignis haben keine einheitliche Unterstützung, während die keyup Veranstaltung tut.

Stellen Sie außerdem sicher, dass Sie den Ereignishandler mit einer Cross-Browser-kompatiblen Methode anhängen …

Benutzer-Avatar
Markus Dumic

Sie können diesen Code ausprobieren (erfordert jQuery):

<html>
<head>
    <script type="text/javascript" src="https://stackoverflow.com/questions/222740/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#foo').keyup(function(e) {
                var v = $('#foo').val();
                $('#debug').val(v);
            })
        });
    </script>
</head>
<body>
    <form>
        <input type="text" id="foo" value="bar"><br>
        <textarea id="debug"></textarea>
    </form>
</body>
</html>

1093950cookie-checkWie erhalte ich den neuen Wert einer HTML-Eingabe, nachdem ein Tastendruck sie geändert hat?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy