tag:forum.selfhtml.org,2005:/self Text-Input als Summary verwenden – SELFHTML-Forum 2022-12-20T12:47:35Z https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804753#m1804753 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2022-12-19T10:37:32Z 2022-12-19T10:37:32Z Text-Input als Summary verwenden <p>Aloha ;)</p> <p>Im verlinkten Codepen-Minimalbeispiel verwende ich ein Text-Input innerhalb eines Summary. Das Problem, auf das ich dabei stoße: eine Eingabe mit Leertaste führt nicht nur zum Einfügen eines Leerzeichens im Textfeld, sondern auch zum Aufklappen des Details-Elements.</p> <p>Das würde ich gerne vermeiden ohne das Markup großartig anzupassen.</p> <p>Ich habe per Javascript schon einiges versucht - aber stoße da auf unüberwindbare Probleme.</p> <p>Mit <code>stopPropagation</code> kann ich zwar das Bubbling aufhalten, aber nicht verhindern, dass das details-Element aufklappt - weil das ja eine default-Action ist und kein Event-Aufruf.</p> <p>Mit <code>preventDefault</code> kann ich zwar das Aufklappen aufhalten, halte damit aber gleichzeitig die Eingabe auf.</p> <p>Wenn ich <code>preventDefault</code> verwende und das Leerzeichen dann händisch ins Textfeld einfüge verliere ich Browser-Features wie Strg+Z zum Rückgängig machen der Eingabe.</p> <p>Letztere Lösung habe ich mal im Codepen hinterlegt, kann man über die Checkbox aktivieren. So geht das jetzt erstmal online... als Provisorium.</p> <p>Ich bin da gerade etwas ratlos. Natürlich könnte ich workarounds finden, z.B. indem ich kein details...summary verwende, sondern was per Javascript zusammenbastle. Das ist aber nicht mein Ziel.</p> <p>Prinzipiell fände ich es auch denkbar das Markup zu verändern. Wichtig wäre aus meiner Sicht, dass es im zusammengeklappten Zustand möglichst schlank bleibt. Eine Situation, dass das Eingabefeld für sich alleine steht und im Summary ein Text wie "Was bedeutet das?" steht, hätte ich natürlich ziehen können, wollte ich aber eigentlich vermeiden.</p> <p>Vielleicht hat ja jemand von euch noch eine sinnvolle Lösung für mein Dilemma? Ich bin auch für Fundamentalkritik an meinem Ansatz natürlich offen.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804755#m1804755 MudGuard http://www.andreas-waechter.de/ 2022-12-19T10:44:08Z 2022-12-19T10:44:08Z Text-Input als Summary verwenden <p>Hi,</p> <blockquote> <p>Im verlinkten Codepen-Minimalbeispiel verwende ich ein Text-Input innerhalb eines Summary. Das Problem, auf das ich dabei stoße: eine Eingabe mit Leertaste führt nicht nur zum Einfügen eines Leerzeichens im Textfeld, sondern auch zum Aufklappen des Details-Elements.</p> </blockquote> <p>Das kann ich im Desktop-Firefox 108.0.1 unter Windows 10 Pro nicht nachvollziehen.<br> Ein Leerzeichen im Input ändert nix am Aufklapp-Status.</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804758#m1804758 Rolf B 2022-12-19T10:48:14Z 2022-12-19T10:48:14Z Text-Input als Summary verwenden <p>Hallo Camping_RIDER,</p> <blockquote> <p>Text-Input innerhalb eines Summary.</p> </blockquote> <p>Lass es sein. Das ist verboten.</p> <p>Es entsteht die Hierarchie details > summary > text-input</p> <p>Details und text-input sind interaktiv. Interaktive Elemente dürfen nicht geschachtelt werden.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804765#m1804765 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2022-12-19T11:10:22Z 2022-12-19T11:10:22Z Text-Input als Summary verwenden <p>@@Camping_RIDER</p> <blockquote> <p>Im verlinkten Codepen-Minimalbeispiel verwende ich ein Text-Input innerhalb eines Summary. Das Problem, auf das ich dabei stoße: eine Eingabe mit Leertaste führt nicht nur zum Einfügen eines Leerzeichens im Textfeld, sondern auch zum Aufklappen des Details-Elements.</p> </blockquote> <p>Du beschreibst nicht das Problem, sondern das, was du für eine Lösung hältst.</p> <p>Was ist das eigentliche Problem, das du mit diesem kruden Markup zu lösen gedenkst?</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em>„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“</em><br> — @Grantscheam auf Twitter </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804766#m1804766 Felix Riesterer https://felix-riesterer.de 2022-12-19T11:49:38Z 2022-12-19T11:49:38Z Text-Input als Summary verwenden <p>Lieber Camping_RIDER,</p> <p>Du willst also ein Textinput nur auf Verlangen verfügbar machen? Dazu verwendet man doch üblicherweise eine Checkbox, deren Status die Sichtbarkeit von Siblings regelt. Dass das mit details/summary scheinbar auch möglich ist, bedeutet nicht, dass man dafür details/summary nutzen <em>muss</em>.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804797#m1804797 JürgenB https://www.j-berkemeier.de 2022-12-20T07:42:58Z 2022-12-20T07:42:58Z Text-Input als Summary verwenden <p>Hallo Janosch,</p> <p>du musst dir drei Fragen beantworten:</p> <ul> <li>Wo soll man hinklicken<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>, um das Inputfeld zu fokussieren?</li> <li>Wo soll man hinklicken, um die weiteren Infos zu öffnen?</li> <li>Kommen die Seitenbesucher damit zurecht?</li> </ul> <p>Danach kannst du entscheiden, welches Markup geeignet ist, und ob da mit Javascript noch etwas nachgeholfen werden muss.</p> <p>Die Codepenversion „funktioniert“ in meinem FF, aber es ist nicht intuitiv, wenn der Klick auf das Dreieck die Info öffnet, der Klick auf den Text dahinter aber den Input fokussiert.</p> <p>Gruß<br> Jürgen</p> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Hiermit ist auch Touch oder Anfahren mit der Tastatur gemeint. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804815#m1804815 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2022-12-20T10:52:31Z 2022-12-20T10:52:31Z Text-Input als Summary verwenden <p>Aloha ;)</p> <p>Danke an alle für die Antworten!</p> <p>Ich habe jetzt folgende Lösung gezogen:</p> <p><a href="/images/98ece0f0-8052-11ed-ba56-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/98ece0f0-8052-11ed-ba56-b42e9947ef30.png?size=medium" alt="linksbündig Überschrift, daneben rechtsbündig ein Fragezeichen mit Dreieck zum Aufklappen der Beschreibung. Darunter das Eingabefeld." loading="lazy"></a></p> <p><a href="/images/e61c90b4-8052-11ed-8ff0-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/e61c90b4-8052-11ed-8ff0-b42e9947ef30.png?size=medium" alt="Selbe Situation, nun aber mit aufgeklapptem Hilfe-Text, der zwischen Überschrift und Eingabefeld erscheint" loading="lazy"></a></p> <p>Das Markup dazu:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lesson_2302_notice<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bemerkung zur Unterrichtsstunde<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> Dieser Hinweis wird im Stundenplan angezeigt. Hier sollten [...] <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lesson_2302_notice<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lesson_2302_notice<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>FD Schiene 1<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lesson_notice<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>Das label im h4 könnte natürlich auch nur einfach ein label sein; das ist in ein h4 eingeschlossen, weil es zum umliegenden Markup so besser passt.</p> <p>Styling-technisch wird die h4 mit <code>float: left;</code> behandelt und summary bekommt <code>text-align: right;</code>.</p> <p>So erreiche ich wie gewünscht eine schlanke, unauffällige Klickfläche zum Öffnen des Erklärtexts und eine große Klickfläche als label, außerdem ist die Lösung (im Vergleich zum Summary-Text in einer eigenen Zeile) im zusammengeklappten Zustand auch vertikal sehr schlank, was für mich wichtig war.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804757#m1804757 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2022-12-19T10:46:41Z 2022-12-19T10:46:41Z Text-Input als Summary verwenden <p>Aloha ;)</p> <blockquote> <blockquote> <p>Im verlinkten Codepen-Minimalbeispiel verwende ich ein Text-Input innerhalb eines Summary. Das Problem, auf das ich dabei stoße: eine Eingabe mit Leertaste führt nicht nur zum Einfügen eines Leerzeichens im Textfeld, sondern auch zum Aufklappen des Details-Elements.</p> </blockquote> <p>Das kann ich im Desktop-Firefox 108.0.1 unter Windows 10 Pro nicht nachvollziehen.<br> Ein Leerzeichen im Input ändert nix am Aufklapp-Status.</p> </blockquote> <p>Ah - interessant. Jetzt, wo du's sagst: Bei mir im Linux-Firefox auch kein Problem. Im Linux-Chrome hingegen schon. Leider.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804759#m1804759 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2022-12-19T10:49:39Z 2022-12-19T10:49:39Z Text-Input als Summary verwenden <p>Aloha ;)</p> <blockquote> <p>Details und text-input sind interaktiv. Interaktive Elemente dürfen nicht geschachtelt werden.</p> </blockquote> <p>Ich sehe ein, dass das zwangsläufig Probleme ergibt, interaktive Elemente zu verschachteln - aber wo steht, dass das verboten ist?</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804761#m1804761 Rolf B 2022-12-19T10:52:02Z 2022-12-19T10:55:12Z Text-Input als Summary verwenden <p>Hallo Camping_RIDER,</p> <p>in der HTML Spec. Hätte ich jetzt jedenfalls gedacht. Die genaue Stelle muss ich noch finden.</p> <p>Jedenfalls hat Gunnar sowas schon oft genug gesagt…</p> <p>Update: Ups. Beim <summary> steht als Content-Type "phrasing content intermixed with heading content" - und input ist phrasing content. Beim <details> Element steht zwar "interactive", aber interaktiver Inhalt ist nicht explizit verboten, so wie bei a oder button.</p> <p>Jetzt bin ich verwirrt.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804763#m1804763 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2022-12-19T10:55:36Z 2022-12-19T10:55:36Z Text-Input als Summary verwenden <p>Aloha ;)</p> <blockquote> <p>in der HTML Spec. Hätte ich jetzt jedenfalls gedacht. Die genaue Stelle muss ich noch finden.</p> </blockquote> <p>Ich sehe <a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-summary-element" rel="nofollow noopener noreferrer">hier</a>, dass in Summary <em>phrasing content</em> erlaubt ist, was laut <a href="https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2" rel="nofollow noopener noreferrer">hier</a> auch <code>input</code> umfasst...?</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804764#m1804764 Rolf B 2022-12-19T10:59:00Z 2022-12-19T10:59:00Z Text-Input als Summary verwenden <p>Hallo Camping_RIDER,</p> <p>ja. Daher mein Update. Ich bin verwirrt. Aber das Schachteln interaktiver Elemente sollte definitiv verboten sein, das führt sonst nur ins Bedienungschaos.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804768#m1804768 Rolf B 2022-12-19T12:09:56Z 2022-12-19T12:09:56Z Text-Input als Summary verwenden <p>Hallo Camping_RIDER,</p> <p>immerhin habe ich die Frage bei <a href="https://stackoverflow.com/questions/49974019/how-to-prevent-the-html-details-element-from-toggling-when-the-summary-has-an-em" rel="noopener noreferrer">StackOverflow</a> gefunden. Ausgehend von einer jQuery-„Lösung“ gibt's noch diese Alternative zum Rumspielen mit Selections:</p> <pre><code class="block language-js"><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> sum <span class="token keyword">of</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'summary input'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> sum<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'keyup'</span><span class="token punctuation">,</span> handleInputInSummary<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">handleInputInSummary</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>key <span class="token operator">==</span> <span class="token string">" "</span> <span class="token operator">&&</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>tagName <span class="token operator">==</span> <span class="token string">"INPUT"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> d <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">"details"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> d<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"open"</span><span class="token punctuation">)</span> <span class="token operator">?</span> d<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"open"</span><span class="token punctuation">)</span> <span class="token operator">:</span> d<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"open"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Im SO Artikel werden auch Bedenken zur Accessibility geäußert, denen wird aber auch widersprochen. Ich kann's nicht wirklich beurteilen.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804791#m1804791 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2022-12-19T19:04:40Z 2022-12-19T19:04:40Z Text-Input als Summary verwenden <p>Aloha ;)</p> <blockquote> <p>Du beschreibst nicht das Problem, sondern das, was du für eine Lösung hältst.</p> </blockquote> <p>Jein. Du hast insofern Recht...</p> <blockquote> <p>Was ist das eigentliche Problem, das du mit diesem kruden Markup zu lösen gedenkst?</p> </blockquote> <p>...dass ich ein anderes Markup verwenden könnte um mein primäres Problem zu lösen. Richtig. Schrieb ich ja auch.</p> <p>Ich habe aber neben der konkreten Anwendung, die mein primäres Problem ist (was, wie du korrekt schreibst, anders einfach lösbar wäre), noch ein sekundäres gefunden (und das ist das, auf was ich mich hier beziehe):</p> <p>Wenn es sich bei diesem Beispiel um valides Markup handelt (und mir scheint das so, ob man das jetzt anders lösen kann oder nicht) - kann ich es dann irgendwie dazu bringen, sich erwartungsgemäß (wie im Firefox, eine Texteingabe triggert kein weiteres Verhalten) zu verhalten oder muss ich mit dem leben, was Chrome/Webkit da kruderweise draus macht?</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804767#m1804767 Rolf B 2022-12-19T11:54:09Z 2022-12-19T11:54:09Z Text-Input als Summary verwenden <p>Hallo Felix,</p> <p>was im summary steht, ist immer sichtbar.</p> <p>Problem ist hier die sich beißende Interaktivität von details/summary und input Element</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804790#m1804790 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2022-12-19T18:58:36Z 2022-12-19T18:58:36Z Text-Input als Summary verwenden <p>Aloha ;)</p> <blockquote> <p>Du willst also ein Textinput nur auf Verlangen verfügbar machen?</p> </blockquote> <p>Du hattest also vor deiner Antwort das verlinkte Minimalbeispiel gar nicht angeschaut? </p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804789#m1804789 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2022-12-19T18:56:58Z 2022-12-19T18:56:58Z Text-Input als Summary verwenden <p>Aloha ;)</p> <blockquote> <pre><code class="block language-js"><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> sum <span class="token keyword">of</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'summary input'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> sum<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'keyup'</span><span class="token punctuation">,</span> handleInputInSummary<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">handleInputInSummary</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>key <span class="token operator">==</span> <span class="token string">" "</span> <span class="token operator">&&</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>tagName <span class="token operator">==</span> <span class="token string">"INPUT"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> d <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">"details"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> d<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"open"</span><span class="token punctuation">)</span> <span class="token operator">?</span> d<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"open"</span><span class="token punctuation">)</span> <span class="token operator">:</span> d<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"open"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Ja - die Idee dahinter ist, dass details-Element schnell wieder zuzuklappen nachdem es geöffnet wurde.</p> <p>In dem Fall sogar auf eine problematische Weise, weil es immer geschlossen wird (was, wenn der User es geöffnet hatte?).</p> <p>Ich habe das selbe auch schon versucht, mit einer toggle-Lösung statt always-closed.</p> <p>Funktioniert, aber leider nicht wie gewünscht. Es folgt leider trotzdem ein auf-zu-flackern das stört.</p> <blockquote> <p>Im SO Artikel werden auch Bedenken zur Accessibility geäußert, denen wird aber auch widersprochen.</p> </blockquote> <p>Accessibility ist deshalb nicht negativ betroffen, weil man mit Tastatur immer noch den parentNode des Input errreicht und den ganz normal aufklappen kann.</p> <p>Mir schwant, dass es für dieses technische Problem keine zufriedenstellende Lösung gibt. Hrmpf. Aktuell kommt mein Provisorium dem erwünschten Verhalten wohl noch am nächsten. Vielleicht muss ich doch zu einer "Was ist das?"-Lösung als summary greifen.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804792#m1804792 Matthias Scharwies mscharwies@selfhtml.org 2022-12-19T19:18:19Z 2022-12-19T19:18:19Z Text-Input als Summary verwenden <p>Servus! Warum nicht so?</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eingabe<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hier kann man was eingeben<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eingabe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Eingabefeld: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> Hier steht eine langatmige Erklärung dazu, was das Eingabefeld bewirkt. Sie muss normalerweise unsichtbar sein, weil sie schlicht und ergreifend zu lang wäre. Das Problem: Gibt man einen Text ins Eingabefeld ein, so klappt dieser Text bei jedem Leerzeichen auf und zu. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> </code></pre> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Eigentlich hatte ich heute <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">viel vor</a> - jetzt habe ich morgen viel vor! </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804820#m1804820 Rolf B 2022-12-20T11:20:06Z 2022-12-20T11:20:06Z Text-Input als Summary verwenden <p>Hallo Janosch,</p> <p>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?</p> <p>Gleich mal getestet, ob das auch die Chromia mittun:</p> <pre><code class="block language-js"><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> inp_in_sum <span class="token keyword">of</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"summary input"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> inp_in_sum<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">"summary"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"keyup"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>target <span class="token operator">!=</span> event<span class="token punctuation">.</span>currentTarget<span class="token punctuation">)</span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>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.</p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804793#m1804793 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2022-12-19T19:32:08Z 2022-12-19T19:32:08Z Text-Input als Summary verwenden <p>@@Matthias Scharwies</p> <blockquote> <p>Warum nicht so?</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eingabe<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hier kann man was eingeben<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eingabe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Eingabefeld: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> Hier steht eine langatmige Erklärung dazu, was das Eingabefeld bewirkt. Sie muss normalerweise unsichtbar sein, weil sie schlicht und ergreifend zu lang wäre. Das Problem: Gibt man einen Text ins Eingabefeld ein, so klappt dieser Text bei jedem Leerzeichen auf und zu. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Die Beschriftung hinter dem Eingabefeld?</p> <p>Warum nicht so?</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eingabe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Eingabefeld<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eingabe<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hier kann man was eingeben<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Erklärung<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Hier steht eine langatmige Erklärung dazu, was das Eingabefeld bewirkt. Sie muss normalerweise unsichtbar sein, weil sie schlicht und ergreifend zu lang wäre.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> </code></pre> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em>„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“</em><br> — @Grantscheam auf Twitter </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804804#m1804804 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2022-12-20T09:59:56Z 2022-12-20T09:59:56Z Text-Input als Summary verwenden <p>Aloha ;)</p> <blockquote> <p>Warum nicht so?</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eingabe<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hier kann man was eingeben<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eingabe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Eingabefeld: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> Hier steht eine langatmige Erklärung dazu, was das Eingabefeld bewirkt. Sie muss normalerweise unsichtbar sein, weil sie schlicht und ergreifend zu lang wäre. Das Problem: Gibt man einen Text ins Eingabefeld ein, so klappt dieser Text bei jedem Leerzeichen auf und zu. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Ja, wäre eine Möglichkeit (fürs Primärproblem, um das es mir hier gar nicht so sehr ging). Hat aber auch seine Tücken: So verliert das label seinen Sinn - zumindest im Chrome wird jetzt beim anklicken des Labels nur noch aufgeklappt, nicht mehr das Textfeld markiert.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804794#m1804794 Raketenwilli 2022-12-19T23:36:41Z 2022-12-19T23:53:39Z Merkwürdig ist ... <blockquote> <p>Warum nicht so?</p> </blockquote> <pre><code class="block"><label for=… <input id=… </code></pre> <p>So wie ich das sehe, liegst Du goldrichtig: „Semantik“ vers. „technisch möglich“. In einem Textbrowser würde das Problem offenbar.</p> <p>Merkwürdig ist, dass zwar Typos und etwas wie „PDF-Format“ straffrei angemeckert wird, aber fachlich vertretbare Fachkritik zu Abwertungen führt.</p> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804805#m1804805 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2022-12-20T10:01:25Z 2022-12-20T10:01:25Z Text-Input als Summary verwenden <p>Aloha ;)</p> <blockquote> <p>Warum nicht so?</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eingabe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Eingabefeld<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eingabe<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hier kann man was eingeben<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Erklärung<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Hier steht eine langatmige Erklärung dazu, was das Eingabefeld bewirkt. Sie muss normalerweise unsichtbar sein, weil sie schlicht und ergreifend zu lang wäre.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Das scheint mir letztlich tatsächlich die einzige Lösung zu sein, die so richtig funktioniert - was die ursprüngliche Frage nicht beantwortet, mir aber letztlich in der Primärproblematik natürlich trotzdem weiterhilft.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804795#m1804795 Rolf B 2022-12-20T07:20:12Z 2022-12-20T07:20:12Z Merkwürdig ist ... <p>Hallo Raketenwilli,</p> <p>E war nicht mein Minus, aber ich finde trotzdem, dass Gunnar als unser UI Papst eins verdient hat.</p> <p>Die Idee von Matthias war ja, input und details über das label zu verheiraten, und statt einfach das Standardpattern rauszuhauen wäre ein Kommentar nützlich gewesen, ob dieses Konstrukt zulässig und zugänglich ist.</p> <p>Denn auch hierbei generiert man einen Interaktionskonflikt: ein Klick auf das Label fokussiert normalerweise das gelabelte-Element.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804796#m1804796 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2022-12-20T07:22:35Z 2022-12-20T07:25:11Z Merkwürdig ist ... <p>@@Raketenwilli</p> <blockquote> <p>Merkwürdig ist, dass zwar Typos und etwas wie „PDF-Format“ straffrei angemeckert wird, aber fachlich vertretbare Fachkritik zu Abwertungen führt.</p> </blockquote> <p>Die Bewertungsfunktion war hier schon immer ein Glücksspiel. Manche können mit ihr umgehen, manche nicht.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em>„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“</em><br> — @Grantscheam auf Twitter </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804807#m1804807 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2022-12-20T10:10:52Z 2022-12-20T10:10:52Z Merkwürdig ist ... <p>Aloha ;)</p> <blockquote> <p>Die Idee von Matthias war ja, input und details über das label zu verheiraten, und statt einfach das Standardpattern rauszuhauen wäre ein Kommentar nützlich gewesen, ob dieses Konstrukt zulässig und zugänglich ist.</p> </blockquote> <p>Ja. Deshalb schrieb ich ja schon die ganze Zeit und immer, dass ein geändertes Markup nicht das ist, was ich suche.</p> <p>Mir ging es tatsächlich darum:</p> <blockquote> <p>Denn auch hierbei generiert man einen Interaktionskonflikt: ein Klick auf das Label fokussiert normalerweise das gelabelte-Element.</p> </blockquote> <p>Ob es möglich ist, diesen Interaktionskonflikt aufzuheben - egal ob jetzt in meiner Version oder in Matthias' Version.</p> <p>Natürlich kann man mit anderem Markup das Problem prinzipiell auch umgehen - und es ist vielleicht nicht unklug, das zu tun, weil man nur so auch in exotischen Browsern ziemlich sicher sein kann, dass alles funktioniert. Daher hat Gunnar von mir - obwohl er mein formuliertes Problem nicht gelöst, sondern nur umgangen hat - von mir ein Plus gekriegt...</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804806#m1804806 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2022-12-20T10:07:33Z 2022-12-20T10:07:33Z Text-Input als Summary verwenden <p>Aloha ;)</p> <blockquote> <p>du musst dir drei Fragen beantworten:</p> <ul> <li>Wo soll man hinklicken<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>, um das Inputfeld zu fokussieren?</li> <li>Wo soll man hinklicken, um die weiteren Infos zu öffnen?</li> <li>Kommen die Seitenbesucher damit zurecht?</li> </ul> <p>Danach kannst du entscheiden, welches Markup geeignet ist, und ob da mit Javascript noch etwas nachgeholfen werden muss.</p> </blockquote> <p>Ja, völlig richtig. Mein Gedanke war tatsächlich, dass nur der Klick auf das Dreieck die Info öffnet. In meiner ursprünglichen Anwendung war bzw. ist nicht einmal ein label dabei, das habe ich hier nur der Vollständigkeit hinzugefügt.</p> <p>Ich sehe aber ein, dass es vielleicht eine unzulässige Annahme war, dass das für Seitenbesucher (sind allerdings in dem Fall konkret nur sehr wenige Personen - das Ding ist nichtöffentlich!) so funktioniert.</p> <blockquote> <p>Die Codepenversion „funktioniert“ in meinem FF, aber es ist nicht intuitiv, wenn der Klick auf das Dreieck die Info öffnet, der Klick auf den Text dahinter aber den Input fokussiert</p> </blockquote> <p>Danke für das Feedback!</p> <blockquote></blockquote> <p>(Aus prinzipiell-technischen Gründen würde mich trotzdem interessieren, ob es eine Lösung gibt, mit der ich das, was im Firefox geht, auch im Chrome hinbekommen kann.)</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Hiermit ist auch Touch oder Anfahren mit der Tastatur gemeint. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804816#m1804816 Rolf B 2022-12-20T10:55:01Z 2022-12-20T10:55:01Z Text-Input als Summary verwenden <p>Hallo Camping_RIDER,</p> <blockquote> <p>das Ding ist nichtöffentlich!</p> </blockquote> <p>dein Projekt mit Felix? Gerade da solltest Du auf intuitive Bedienbarkeit achten, das sind keine technikaffinen Menschen, für die Du da programmierst.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804823#m1804823 Raketenwilli 2022-12-20T11:41:53Z 2022-12-20T11:47:24Z „in exotischen Browsern“ <p>Naja ... die von mir angesprochenen Textbrowser (lyncs, links, w3m (¹)) sind auf Systemen ohne GUI manchmal weniger exotisch als nützlich. Ich „mache“ zur Zeit viel mit schlanken virtuellen Linux-Maschinen „herum“ und da ist die Nutzung eines Textbrowsers durchaus eine schöne Möglichkeit, die Erfordernisse eines grafischen Systems sowie die Trägheit eines Remote-Desktops oder dergleichen zu vermeiden. Nichts für den Alltag, aber einfacher als Daten am Desktop herunterladen und dann mit scp zu “verschubsen“.</p> <ul> <li><a href="https://www.com-m.de/elektronische-hilfsmittel/produkte/braille-ein-und-ausgabe-geraete/" rel="nofollow noopener noreferrer">Zudem ist die Erfindung des Herrn Braille offenbar immer noch in Gebrauch</a>.</li> </ul> <p>¹) Ich selbst nehme diese übrigens deshalb auch für die Kontrolle meiner Ergebnisse.</p> <p><a href="/images/0df5004a-805c-11ed-be9e-b42e9947ef30.jpg" rel="noopener noreferrer"><img src="/images/0df5004a-805c-11ed-be9e-b42e9947ef30.jpg?size=medium" alt="" loading="lazy"></a></p> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804821#m1804821 Rolf B 2022-12-20T11:24:22Z 2022-12-20T11:24:22Z Text-Input als Summary verwenden <p>Hallo Camping_RIDER,</p> <p>okay, so kann man es machen.</p> <p>Eventuell müsste man das Fragezeichen größer und deutlicher machen. Ggf. das Summary-Element wie einen Button stylen.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804817#m1804817 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2022-12-20T11:01:10Z 2022-12-20T11:01:10Z Text-Input als Summary verwenden <p>Aloha ;)</p> <blockquote> <blockquote> <p>das Ding ist nichtöffentlich!</p> </blockquote> <p>dein Projekt mit Felix?</p> </blockquote> <p>Ja Zu viel mehr komme ich ja auch nicht mehr.</p> <blockquote> <p>Gerade da solltest Du auf intuitive Bedienbarkeit achten, das sind keine technikaffinen Menschen, für die Du da programmierst.</p> </blockquote> <p>Jein - Ja, weil das immer gilt, Nein, weils in diesem konkreten Fall nur die Stundenplanverwalter trifft. Die sind ausreichend technikaffin<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>, also kein Thema.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Die bedienen Untis<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup>... <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p>das ist UX-technisch auf kotzwürg-Level. <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804822#m1804822 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2022-12-20T11:32:17Z 2022-12-20T11:32:17Z Text-Input als Summary verwenden <p>Aloha ;)</p> <blockquote> <p>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?</p> </blockquote> <p>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.</p> <blockquote> <p>Gleich mal getestet, ob das auch die Chromia mittun:</p> <pre><code class="block language-js"><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> inp_in_sum <span class="token keyword">of</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"summary input"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> inp_in_sum<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">"summary"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"keyup"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>target <span class="token operator">!=</span> event<span class="token punctuation">.</span>currentTarget<span class="token punctuation">)</span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <blockquote> <p>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.</p> </blockquote> <p>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.</p> <blockquote> <p>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.</p> </blockquote> <p>Tatsächlich ist closest gar nicht zwingend notwendig. Da das <code>preventDefault</code> ausschließlich im Input <strong>nicht</strong> feuern darf, danach aber jederzeit, ist es sogar völlig egal, ob das <code>preventDefault</code> schon im parentNode von input passiert. Das ist unschädlich, siehe pen.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804836#m1804836 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2022-12-20T12:47:35Z 2022-12-20T12:47:35Z Text-Input als Summary verwenden <p>@@Rolf B</p> <blockquote> <p>Eventuell müsste man das Fragezeichen größer und deutlicher machen.</p> </blockquote> <p>Deutlicher auch im Sinne von Alternativtext:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>visually-hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Erklärung<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> </code></pre> <p>mit dem bekannten CSS für <a href="https://www.a11yproject.com/posts/how-to-hide-content/" rel="nofollow noopener noreferrer"><code>.visually-hidden</code></a></p> <p>Auch wenn in der Zielgruppe momentan keine Screenreadernutzer sind.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em>„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“</em><br> — @Grantscheam auf Twitter </div> https://forum.selfhtml.org/self/2022/dec/19/text-input-als-summary-verwenden/1804826#m1804826 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2022-12-20T11:57:28Z 2022-12-20T11:57:28Z „in exotischen Browsern“ <p>Aloha ;)</p> <blockquote> <p>Naja ... die von mir angesprochenen Textbrowser (lyncs, links, w3m (¹)) sind auf Systemen ohne GUI manchmal weniger exotisch als nützlich.</p> </blockquote> <p>Das war jetzt ein Missverständnis. Mit <em>exotische Browser</em> meinte ich explizit nicht die von dir angesprochenen Textbrowser (die sind für mich nicht exotisch, sondern funktionieren einfach völlig anders - aber da ist ein auf/zugeklapptes details-Element eh kein Problem), sondern mein Gedanke ging eher an normale grafische Browser, die sich nochmal anders verhalten als Chrome und Firefox.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div>