Eingabehilfe des Browsers --> Javascript-Event wird umgangen

[coder1979]

Hi zusammen,

gleicher Tag, noch eine Frage: Mir ist leider kein treffender Titel für den Post eingefallen aber ich versuchs mal zu beschreiben:

Ich habe ein Eingabefeld das ich mit dem Event "onkeyup()" an eine Funktion gebunden habe. D.h. sobald der User quasi eine Taste drückt (also was ins Feld eingibt) wird die Funktion aufgerufen.

Nun haben die Browser (zumindest mein Firefox) ja neuerdings eine supertolle "Eingabehilfe". Sobald ich mal in das Feld was eingetragen habe und das Feld erneut antippe, werden mir dir zuletzt eingegebenen Werte in einem kleinen Fenster unterhalb des Eingabefeldes angezeigt.

Problem: Wenn der User dann (anstatt dass er den Wert reinschreibt) auf einen EIntrag der angezeigten Eingabehilfe klickt, wird das "onkeyup()"-Event nicht getriggert und somit die Funktion nicht angestoßen.

Daher die Frage(n):

Kann man per Javascript die Eingabehilfe deaktivieren?

Falls nein: Gibt es ein Event, das auch greift, wenn sich das Feld über die Eingabehilfe füllt? onchange funktioniert schon mal nicht...

Danke für eure Tipps

LG Daniel

Edit: Den Artikel hab ich gerade ergoogelt. Aber leider funktioniert der Zusatz autocomplete="off" oder auch autocomplete="0" nicht. Das ist meinem Firefox völlig egal.

[Der Martin]

Hallo,

Ich habe ein Eingabefeld das ich mit dem Event "onkeyup()" an eine Funktion gebunden habe. D.h. sobald der User quasi eine Taste drückt (also was ins Feld eingibt) wird die Funktion aufgerufen.

und nun stellst du fest, dass es ungefähr n+1 weitere Möglichkeiten gibt, etwas in dieses Feld einzugeben.

Falls nein: Gibt es ein Event, das auch greift, wenn sich das Feld über die Eingabehilfe füllt?

Wie wär's mit oninput? - Wobei die Bindung eines Eventhandlers über ein on...-Attribut schon lange nicht mehr state of the art ist. Die zeitgemäße Methode, Eventhandler zu registrieren, ist addEventListener().

onchange funktioniert schon mal nicht...

Ja, onchange feuert erst, wenn das Eingabefeld den Focus verliert.

Einen schönen Tag noch
 Martin

[coder1979]

Hi,

saucool, danke. oninput funktioniert prächtig.

Aber zu deiner "state-of-the-art" Anmerkung:

Gibt es Nachteile (womöglich sogar Browser-Inkompatibilitäten) wenn man immer noch mit inline-events (wie onclick="") arbeitet, oder "macht man das einfach so nicht mehr" aber es ist genauso ok wie eventListeners?

Oder anders gefragt: Was ist der Vorteil, eventlisteners zu verwenden?

Mein Ziel ist maximale Browserkompatibilität, von daher springe ich auch gerne auf den eventListener-Zug, wenn das besser ist.

LG Daniel

[Der Martin]

Hallo,

saucool, danke.
oninput funktioniert prächtig.

na prima. 😀

Aber zu deiner "state-of-the-art" Anmerkung:

Gibt es Nachteile (womöglich sogar Browser-Inkompatibilitäten) wenn man immer noch mit inline-events (wie onclick="") arbeitet, oder "macht man das einfach so nicht mehr" aber es ist genauso ok wie eventListeners?

Rein technisch betrachtet: Solange du nicht mehr als einen Eventhandler pro Element registrierst, ist da kein Unterschied. Aber addEventListener() sorgt dafür, dass du auch mehrere Handler für dasselbe Event auf demselben Element registrieren kannst, und sie werden alle aufgerufen. Bei der Notation als HTML-Attribut würde eine zweite Definition die erste überschreiben.

Oder anders gefragt: Was ist der Vorteil, eventlisteners zu verwenden?

Erstens: Siehe oben. Zweitens: Separation of concerns. Man möchte HTML und Javascript nach Möglichkeit voneinander trennen.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

Rein technisch betrachtet: Solange du nicht mehr als einen Eventhandler pro Element registrierst, ist da kein Unterschied.

Bis auf den von Auge erwähnten.

Nicht zu unterschätzen. Ich arbeitet gerade an einem Projekt, wo ich das Markup nicht ändern kann, sondern nur CSS und JavaScript. Da sind etliche Eventhandler, die ich unschädlich machen müsste – aber im HTML gesetzt. Ich kotze im Strahl.

Aber addEventListener() sorgt dafür, dass du auch mehrere Handler für dasselbe Event auf demselben Element registrieren kannst, und sie werden alle aufgerufen. Bei der Notation als HTML-Attribut würde eine zweite Definition die erste überschreiben.

<input oninput="handler1(event)" oninput="handler2(event)"/>

geht natürlich nicht, da ein Attribut nur einmal für ein Element gesetz werden darf. Das aber geht:

<input oninput="handler1(event); handler2(event)"/>

Was nicht heißen soll, das man das tun sollte, denn:

Man möchte HTML und Javascript nach Möglichkeit voneinander trennen.

Das allerdings.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Nicht zu unterschätzen. Ich arbeitet gerade an einem Projekt, wo ich das Markup nicht ändern kann, sondern nur CSS und JavaScript. Da sind etliche Eventhandler, die ich unschädlich machen müsste – aber im HTML gesetzt. Ich kotze im Strahl.

Aber nicht deshalb. Per HTML gesetze Handler ließen sich ja entfernen mit

for (let attribute in element) {
	if (attribute.startsWith('on')) {
		element.removeAttribute(attribute);
	}
}

Deren Handler sind im JavaScript gesetzt, aber nicht mit benannter Handlerfunktion

element.addEventlistener('click', handler);

(was sich mit element.removeEventlistener('click', handler); wegbekommen ließe), sondern per anonymer Funktion

element.addEventlistener('click', function (event) {
  // a bunch of statements
});

Vielen Dank für nichts.

🖖 Живіть довго і процвітайте

[JürgenB]

Hallo Gunnar,

… sondern per anonymer Funktion

element.addEventlistener('click', function (event) {
  // a bunch of statements
});

wird man die nicht mit

element.onclick = null;

los?

Gruß
Jürgen

[Auge]

Hallo

Was ist der Vorteil, eventlisteners zu verwenden?

Zum schon von Martin genannten Vorteil, mehrere Events auf einem Element registrieren zu können, kommt hinzu, dass man Events auch wieder löschen kann. Das ist nicht in jedem Fall gewünscht, aber manchmal möchte man eine Aktion einmalig ausführen und dem betreffenden Element die entsprechende Funktion entziehen anstatt fürderhin zu prüfen, ob die Funktion schon einmal ausgeführt wurde.

Oder man möchte dem Element als Folge der Ausführung der ersten Aktion eine andere Aktion/Aufgabe zuweisen. Den alten Event-Listener zu löschen und einen neuen zu registrieren ist eine Möglichkeit, das zu erreichen.

Tschö, Auge

[coder1979]

Vielen Dank für eure Antworten / Argumente.

Klingt auf jeden Fall sehr einleuchtend, besser die EventListeners zu verwenden. Werd ich mir in Zukunft angewöhnen.

LG Daniel