Text-Input als Summary verwenden

[Camping_RIDER]

Aloha ;)

das verrückteste ist: Das keyup-Event blubbert im Firefox ganz normal nach oben, zum Summary Element. Aber wenn es in einem input-Element generiert wurde, dann löst es im Summary nichts aus. Macht der Fuchs da etwa eine Abfrage auf target == currentTarget?

Ah - coole Analyse! Ich hab gar nicht gepeilt, dass das aufklappen bei keyup passiert; ich war im Wesentlichen immer bei keydown, außerdem hatte ich currentTarget gar nicht auf dem Schirm.

Gleich mal getestet, ob das auch die Chromia mittun:

for (let inp_in_sum of document.querySelectorAll("summary input")) {
  inp_in_sum.closest("summary")
            .addEventListener("keyup", function(event) {
    if (event.target != event.currentTarget) {
      event.preventDefault();
    }
  });
}

Im Firefox keine Veränderung, und Chrome ist jetzt brav. Diese Lösung finde ich akzeptabel, es gibt kein Fummeln am open-Attribut und kein Nachschieben von Spaces über das Selection Objekt. Ohne JavaScript tanzt der Bildschirm halt ein bisschen. Das könntest Du in deiner geschlossenen Benutzergruppe aber ggf. regeln.

Mega - genau diese Lösung habe ich gesucht. Vielen Dank fürs Dranbleiben und ausprobieren. Ich habe das Pen eben entsprechend mit der Lösung geupdatet.

Das closest könnte man sich mit dem Selektor "summary:has(input)" ersparen. Aber :has ist in Chromia gerade mal ein Vierteljahr alt und im Firefox noch experimentell.

Tatsächlich ist closest gar nicht zwingend notwendig. Da das preventDefault ausschließlich im Input nicht feuern darf, danach aber jederzeit, ist es sogar völlig egal, ob das preventDefault schon im parentNode von input passiert. Das ist unschädlich, siehe pen.

Grüße,

RIDER