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

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

--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“

akzeptierte Antworten

  1. @@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

    --
    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
    1. 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

      --
      Meine Meinung zu DSGVO & Co:
      „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
      1. @@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

        --
        “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
        1. 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

          --
          Meine Meinung zu DSGVO & Co:
          „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
          1. 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

            1. 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

              --
              Meine Meinung zu DSGVO & Co:
              „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
          2. 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

            1. 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

              --
              Meine Meinung zu DSGVO & Co:
              „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
              1. 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.

                1. 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

                  --
                  sumpsi - posui - obstruxi
                  1. 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

                    1. 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

                      --
                      sumpsi - posui - obstruxi