html <input type = “text” /> onchange-Ereignis funktioniert nicht

Ich versuche ein Experiment zu machen. Ich möchte, dass jedes Mal, wenn der Benutzer etwas in das Textfeld eingibt, es in einem Dialogfeld angezeigt wird. Ich habe die onchangeEreigniseigenschaft verwendet, um dies zu ermöglichen, aber es funktioniert nicht. Ich muss immer noch die Senden-Taste drücken, damit es funktioniert. Ich habe über AJAX gelesen und denke darüber nach. Benötige ich noch AJAX, damit es funktioniert, oder reicht einfaches JavaScript aus? Bitte helfen Sie.

index.php

<script type="text/javascript" src="javascript.js"> </script>

<form action="index.php" method="get">
 Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br />
 Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br />
 <input type="submit" value="Compute" />
</form>

javascript.js

function checkInput(textbox) {
 var textInput = document.getElementById(textbox).value;

 alert(textInput); 
}

onchangewird nur ausgelöst, wenn die Steuerung unscharf ist. Versuchen Sie es onkeypressstattdessen.

Verwenden Sie .on('input'...diese Option, um jede Änderung an einer Eingabe (Einfügen, Keyup usw.) ab jQuery 1.7 und höher zu überwachen.

Für statische und dynamische Eingaben:

$(document).on('input', '.my-class', function(){
    alert('Input changed');
});

Nur für statische Eingaben:

$('.my-class').on('input', function(){
    alert('Input changed');
});

JSFiddle mit statischem / dynamischem Beispiel: https://jsfiddle.net/op0zqrgy/7/

Das Überprüfen auf Tastenanschläge ist nur eine Teillösung, da der Inhalt eines Eingabefelds mit Mausklicks geändert werden kann. Wenn Sie mit der rechten Maustaste in ein Textfeld klicken, stehen Ihnen Optionen zum Ausschneiden und Einfügen zur Verfügung, mit denen Sie den Wert ändern können, ohne einen Tastendruck auszuführen. Wenn die automatische Vervollständigung aktiviert ist, können Sie mit der linken Maustaste in ein Feld klicken und eine Dropdown-Liste mit zuvor eingegebenem Text abrufen. Mit einem Mausklick können Sie aus einer Auswahl auswählen. Das Überfüllen von Tastenanschlägen erkennt keine dieser Arten von Änderungen.

Leider gibt es kein "Onchange" -Ereignis, das Änderungen sofort meldet, zumindest soweit ich weiß. Es gibt jedoch eine Lösung, die in allen Fällen funktioniert: Richten Sie mit setInterval () ein Timing-Ereignis ein.

Angenommen, Ihr Eingabefeld hat die ID und den Namen "Stadt":

<input type="text" name="city" id="city" />

Haben Sie eine globale Variable namens "Stadt":

var city = "";

Fügen Sie dies Ihrer Seiteninitialisierung hinzu:

setInterval(lookForCityChange, 100);

Definieren Sie dann eine lookForCityChange () -Funktion:

function lookForCityChange()
{
    var newCity = document.getElementById("city").value;
    if (newCity != city) {
        city = newCity;
        doSomething(city);     // do whatever you need to do
    }
}

In diesem Beispiel wird der Wert von "Stadt" alle 100 Millisekunden überprüft, den Sie an Ihre Bedürfnisse anpassen können. Wenn Sie möchten, verwenden Sie eine anonyme Funktion, anstatt lookForCityChange () zu definieren. Beachten Sie, dass Ihr Code oder sogar der Browser möglicherweise einen Anfangswert für das Eingabefeld bereitstellt, sodass Sie möglicherweise über eine "Änderung" informiert werden, bevor der Benutzer etwas unternimmt. Passen Sie Ihren Code nach Bedarf an.

Wenn die Idee, dass ein Timing-Ereignis jede Zehntelsekunde ausgelöst wird, unangemessen erscheint, können Sie den Timer starten, wenn das Eingabefeld den Fokus erhält, und ihn (mit clearInterval ()) bei einer Unschärfe beenden. Ich denke nicht, dass es möglich ist, den Wert eines Eingabefelds zu ändern, ohne dass es den Fokus erhält. Daher sollte das Ein- und Ausschalten des Timers auf diese Weise sicher sein.

HTML5 definiert ein oninputEreignis, um alle direkten Änderungen zu erfassen. Für mich geht das.

onchange tritt nur auf, wenn die Änderung am Eingabeelement vom Benutzer festgeschrieben wird. Meistens verliert das Element den Fokus.

Wenn Sie möchten, dass Ihre Funktion jedes Mal ausgelöst wird, wenn sich der Elementwert ändert, sollten Sie das oninputEreignis verwenden. Dies ist besser als die Ereignisse für das Auf / Ab der Taste, da der Wert mit der Maus des Benutzers geändert, dh eingefügt oder automatisch ausgefüllt werden kann

Lesen Sie mehr über die Änderung Event hier

Lesen Sie mehr über das Eingabeereignis hier

Verwenden Sie folgende Ereignisse anstelle von "onchange".

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

Erstens, was funktioniert nicht? Sehen Sie die Warnung nicht?

Außerdem könnte Ihr Code dadurch vereinfacht werden

<input type="text" id="num1" name="num1" onkeydown="checkInput(this);" /> <br />

function checkInput(obj) {
    alert(obj.value); 
}

Ich bin auf Probleme gestoßen, bei denen Safari keine "onchange" -Ereignisse in einem Texteingabefeld ausgelöst hat. Ich habe ein jQuery 1.7.2 "change" -Ereignis verwendet und es hat auch nicht funktioniert. Am Ende habe ich das Textwechselereignis von ZURB verwendet. Es funktioniert mit Mausereignissen und kann ausgelöst werden, ohne das Feld zu verlassen:
http://www.zurb.com/playground/jquery-text-change-custom-event

$('.inputClassToBind').bind('textchange', function (event, previousText) {
    alert($(this).attr('id'));
});

Ein paar Kommentare, die IMO wichtig sind:

• Eingabeelemente, die kein 'Änderungs'-Ereignis ausgeben, bis die USER-Aktion ENTER oder Unschärfe auf das richtige Verhalten wartet .

• Das Ereignis, das Sie verwenden möchten, ist "input"(" oninput "). Hier wird der Unterschied zwischen den beiden gut demonstriert: https://javascript.info/events-change-input

• Die beiden Ereignisse signalisieren zwei unterschiedliche Benutzergesten / -momente ("Eingabe" -Ereignis bedeutet, dass der Benutzer eine Auswahllistenoption schreibt oder navigiert, die Änderung jedoch noch nicht bestätigt hat. "Änderung" bedeutet, dass der Benutzer den Wert geändert hat (mit einer Eingabe oder Unschärfe) unsere)

• In diesem Fall ist es eine schlechte Praxis, auf wichtige Ereignisse zu hören, wie viele hier empfohlen. (wie Leute, die das Standardverhalten von ENTER bei Eingaben ändern) ...

• jQuery hat damit nichts zu tun. Dies ist alles im HTML-Standard.

• Wenn Sie Probleme haben zu verstehen, WARUM dies das richtige Verhalten ist, ist dies möglicherweise hilfreich. Verwenden Sie als Experiment Ihren Texteditor oder Browser ohne Maus / Pad, nur eine Tastatur.

Meine zwei Cent.

onkeyup hat für mich gearbeitet. Ein Tastendruck wird nicht ausgelöst, wenn die Leertaste gedrückt wird.

Es ist besser , zu verwenden onchange(event)mit <select>. Mit können <input>Sie unten Ereignis verwenden:

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

versuche es onpropertychange. es funktioniert nur für IE.