Felix Riesterer: Javascript: input-Element nachträglich einbinden - oninput und onblur funzen nicht

Beitrag lesen

Lieber Linuchs,

  input_1.autocomplete= "off";
  input_1.oninput     = "getLieder( this )";
  input_1.onblur      = "getLiederSchliessen()";

Du verwendest uralte JavaScript-Mechanismen, von denen Du besser die Finger lassen solltest, weil sie damals mangels besserer Alternativen eine Notlösung waren.

Du notierst mit input_1.onirgendwas = "ein String" im Grunde den Textinhalt eines HTML-Attributs gleichen Namens (hier onirgendwas). Was Du hier stattdessen tun solltest, ist einen passenden EventListener zu notieren:

input_1.addEventListener("irgendwas", function (event) {
  // hier passiert etwas wenn das Event "irgendwas" feuert
});

// das gleiche mit einer Pfeilfunktion für input-Events
input_1.addEventListener("input", event => {
  // event ist vom Typ "input"
});

// wenn Du eine Funktion öfters benötigst
function meineBlurFunktion (node) {
  // node ist eine Referenz auf ein <input> element
}

// die anonyme Funktion (zweiter Parameter nach "blur")
// enthält eine gekapselte Variable "input_1" (Closure):
input_1.addEventListener("blur", function () {
  meineBlurFunktion(input_1);
});

Bitte lasse künftig ab von diesen veralteten onirgendwas-Attributen/-Eigenschaften! Du machst Dir das Leben damit nicht leichter, weil Du nicht sicher sagen kannst, warum etwas (nicht) funktioniert.

unser Wiki zu Eventhandler-Funktionen und wie man sie an Elemente bindet

Liebe Grüße

Felix Riesterer