toggle event erweitern auf zb. onopen onclose ohne CSS und onselect()

[Henry]

Hallo,

Es gibt ja das toogleevent für das <details> Element.

(Habe den Eintrag mal ins Wiki zugefügt ins Eventverzeichnis, wenn ich das falsch gemacht habe, bitte korrigieren.)

Jetzt interessiert mich daran, wo es sich vom clickevent unterscheidet. Genauer gesagt, hatte ich gehofft, dass wenn Details geöffnet ist -> tue dies oder das, wenn danach wieder geschlossen -> gehe wieder in den Urzustand. Aber eben das passiert ja nicht also doch gleich wie clickevent? Dann wäre das schade oder gibt es doch noch irgendwie ein Event dafür, sowas wie …<details onopen="" onclose=""></details>…? Damit meine ich nicht die Möglichkeiten über CSS [open] usw. würden mir nichts nutzen.

Und, andere Frage, gibt es eine Alternative für select ...<textarea onselect="";>… die nicht nur in Inputfeldern funktioniert? Zb. markiere ich einen Text in einer Textarea funktionierts, nicht aber wenn ich Text sonstwo markiere.

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Es gibt ja das toogleevent für das <details> Element. […] Jetzt interessiert mich daran, wo es sich vom clickevent unterscheidet.

1. Das toggle-Event feuert auch, wenn das details-Element per Script geöffnet/geschlossen wird. Siehe Codepen.

2. click feuert, wenn man bei geöffneten details hineinclickt, aber nicht auf die summary – da wird nicht geschlossen.

Genauer gesagt, hatte ich gehofft, dass wenn Details geöffnet ist -> tue dies oder das, wenn danach wieder geschlossen -> gehe wieder in den Urzustand. Aber eben das passiert ja nicht also doch gleich wie clickevent?

Ich werd nicht schlau, was du meinst/willst.

😷 LLAP

[Henry]

Hallo Gunnar,

Ok, Unterschied verstanden, danke.

Ich werd nicht schlau, was du meinst/willst.

Ich versuchs nochmal zu erklären:

<details ontoggle="this.innerHTML = 'bla Details bla blaala';"></details>

Beim öffnen fügt sich der content ein. Klickt man es aber wieder zu bleibts immer noch drin.

Beim zuklicken möchte ich den Inhalt aber nicht mehr (versteckt) drin haben. Mit Js würde ich das zb. so machen:

<h1 id="hcont"></h1>
<button onclick="toggler2()">Klassisch</button>
<div id="out"></div>
<script>
function toggler2()
{
var str = 'bla bla blaala';
//alert(hcont.innerHTML.length);
if(hcont.innerHTML.length == 0){hcont.innerHTML = str;}
else{hcont.innerHTML = '';}
}
</script>

Daher die Frage ob ich dem DetailsElement nicht auch einfach sagen kann zb. onclose="wirf wieder alles raus"

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Beim öffnen fügt sich der content ein. Klickt man es aber wieder zu bleibts immer noch drin.

Beim zuklicken möchte ich den Inhalt aber nicht mehr (versteckt) drin haben. […] Daher die Frage ob ich dem DetailsElement nicht auch einfach sagen kann zb. onclose="wirf wieder alles raus"

Der Sinn dahinter erschließt sich mir nicht.

Ein close-Event gibt es nicht nicht; du kannst aber im toggle-Eventhandler abfragen, ob das Ding gerade auf oder zu ist. Wie das geht, war in meinem Codepen doch schon zu sehen: detailsElement.open.

S.a. MDN

😷 LLAP

[Henry]

Hallo Gunnar,

Der Sinn dahinter erschließt sich mir nicht.

Weniger Ballast, wenn nicht benötigt.

Ein close-Event gibt es nicht nicht; du kannst aber im toggle-Eventhandler abfragen, ob das Ding gerade auf oder zu ist. Wie das geht, war in meinem Codepen doch schon zu sehen: detailsElement.open.

Stimmt! Wo hast du das her? Stundenlang nichts Vergleichbares gefunden. .open ist genau was ich brauche, habs getestet mit != element.open => folglich geschlossen, dann lösche den Inhalt wieder if(!x.open){x.innerHTML='';}. Klappt super, danke. Aber wo findet man sowas, dass es eine Möglichkeit wie diese gibt, klar hier jetzt, aber wo hast du das gefunden?

Gruss
Henry

[MudGuard]

Hi,

Der Sinn dahinter erschließt sich mir nicht.

Weniger Ballast, wenn nicht benötigt.

Inwiefern? Der Inhalt muß ja doch im Script noch vorhanden sein, weil der User ja nochmals das Element öffnen könnte.

Und Du hast dann zusätzlich zum Inhalt ja auch noch das Script zum Einfügen/Rausnehmen.

Also mehr Ballast als wenn Du den Inhalt einfach ins HTML einfügen würdest.

cu,
Andreas a/k/a MudGuard

[Henry]

Hallo MudGuard,

Inwiefern? Der Inhalt muß ja doch im Script noch vorhanden sein, weil der User ja nochmals das Element öffnen könnte.

Inhalt ist nicht vorhanden wird wieder dynamisch nachgeladen

Und Du hast dann zusätzlich zum Inhalt ja auch noch das Script zum Einfügen/Rausnehmen.

Ja eine Zeile.

Also mehr Ballast als wenn Du den Inhalt einfach ins HTML einfügen würdest.

Nein. Und speziell in meinem Fall gehts auch noch um was anderes, eine Art Editor, der Eingaben strukturiert undbei Bedarf den Browser generierten Output abliefern soll und da sollte dann überflüssiges nicht erst mühselig wieder entfernt werden müssen.

Gruss
Henry

[JürgenB]

Hallo Henry,

Ein close-Event gibt es nicht nicht; du kannst aber im toggle-Eventhandler abfragen, ob das Ding gerade auf oder zu ist. Wie das geht, war in meinem Codepen doch schon zu sehen: detailsElement.open.

Stimmt! Wo hast du das her? …

z.B. von https://wiki.selfhtml.org/wiki/HTML/Interaktiv/details#open

Gruß
Jürgen

[Henry]

Hallo JürgenB,

z.B. von https://wiki.selfhtml.org/wiki/HTML/Interaktiv/details#open

Ja da gings aber nur um die CSS Variante, die ich nicht wollte und das open Attribut, damit das per default geöffnet ist. Hätte aber nicht erwartet, dass man das dann miot element.open abfragen kann. Hmm... ob das mit allen Attributen geht? Muss ich nachher mal probieren…

Gruss
Henry

[JürgenB]

Hallo Henry,

du kannst beliebige Attribute, auch selbstdefinierte, mit

element.abc = "xyz";

setzen und auch abfragen. Ich habe noch nicht wirklich verstanden, warum das so ist, aber bei einigen Attributen zeigt das Setzen oder Ändern nur Wirkung, wenn man setAttribute verwendet.

Gruß
Jürgen

PS
Du kannst auf die Änderungen von Attributen auch mit dem MutationObserver reagieren.

[Rolf B]

Hallo JürgenB,

dazu hat die Spec was zu sagen.

Das Gemeine ist, dass die JavaScript Terminologie von "Properties" spricht, während die HTML Spec (soweit ich das erkenne) CORBA IDL verwendet, sie "IDL attributes" nennt und damit die JS Properties meint. Die im HTML notierten Attribute nennt die Spec "content attributes".

Welches Content Attribut Du über ein Property - äh - IDL Attribut ändern kannst, legt die IDL-Definition des entsprechenden Element-Interface fest. Wenn es kein IDL Attribut zum Content Attribut gibt, musst Du wohl setAttribute verwenden.

Dabei muss man auch sehen, dass HTMLElement und seine Abkömmlinge Teil der HTML Spec sind, wärend setAttribute von der DOM Spec definiert wird und zum Element Interface gehört (was eine Superklasse von HTMLElement ist). Eigentlich ist setAttribute zur generischen Behandlung von DOM Elementen gedacht, auch für XML Dokumente, während die per IDL definierten Attribute der HTML Spec konkrete Shortcuts für HTML Dokumente sind.

Ob es eine Aufstellung von Content Attributes gibt, zu denen kein IDL Attribut existiert, weiß nicht nicht. Hast Du Beispiele?

Mit fällt spontan nur triviales ein:

Content: class vs IDL: classList Content: data-* vs IDL: dataset

Rolf

[JürgenB]

Hallo Rolf,

Hast Du Beispiele?

ich habe das leider nie systematisch untersucht. Ich neige dazu, Attribute mit element.attribute anzusprechen, und wenn das nicht funktioniert, nehme ich set/get/hasAttribute. Wenn dann der Fehler doch wo anders lag, mache ich es aber nicht mehr rückgängig.

Ich habe gerade mal einen „Quickscan“ durch einige Scripte gemacht und da habe ich set/get/hasAttribute für Aria-Attribute, für role und für open (bei details) verwendet. Auch Attribute von SVG-Elementen habe ich mit set/get/hasAttribute gesetzt. Bei den CustomElements musste der Zugriff ebenfalls über set/get/hasAttribute erfolgen.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

details.open sollte per IDL verfügbar sein.

Aria ist ein guter Hinweis, das ist ein Addon, das orthogonal zum DOM liegt und nicht in der HTML IDL definiert ist.

Rolf