tag:forum.selfhtml.org,2005:/self Spezielles HTML Inputfeld entwerfen – SELFHTML-Forum 2017-09-29T16:34:29Z https://forum.selfhtml.org/self/2017/sep/28/spezielles-html-inputfeld-entwerfen/1705053#m1705053 hmm 2017-09-28T11:49:22Z 2017-09-28T11:49:22Z Spezielles HTML Inputfeld entwerfen <p>Hi Leute,</p> <p>ich suche ein HTML Inputfeld, welches:</p> <p>a) Im Ruhezustand den gesamten Inhalt anzeigt. Sollte viel an Inhalt drin stehen, so soll der Inhalt über mehrere Zeilen verteilt werden.</p> <p>b) Wenn man in das Inputfeld klickt, soll man ein Menü angezeigt bekommen, in welchem man bestimmte Dinge ankreuzen kann</p> <p>Beispiel: Ruhezustand (mit Leerzeile falls zulang): Hauptfach, Nebenfach, Wahlfach</p> <p>Wenn angeklickt, soll so eine Liste angezeigt werden: [] Hauptfach [] Nebenfach [] Wahlfach</p> <p>Das HTML Feld soll außerdem Speichern, wenn etwas davon angeklickt wurde.</p> <p>wie würdet ihr sowas realisieren? bzw. welche Elementkombinationen sind das? meine aktuelle Lösungidee wäre, dass ich ein html select feld erstelle, mit Option1: "Hauptfach, Nebenfach, \nWahlfach" Option2: Hauptfach Option3: Nebenfach Option4: Wahlfach</p> <p>Und ich per javascript verhindere das option 1 angeklickt werden kann, problem dabei ist nur, dass ich erlauben möchte das mehrere dinge angeklickt werden.</p> <p>Habt ihr ein paar Ideen dazu? Ich würde das auch sehr gerne so realisieren wie hier bei Selfhtml die "Tags"-, "vergebene Tags"-Boxen realisiert wurden, wie macht man sowas?</p> https://forum.selfhtml.org/self/2017/sep/28/spezielles-html-inputfeld-entwerfen/1705055#m1705055 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-09-28T12:05:57Z 2017-09-28T12:05:57Z Spezielles HTML Inputfeld entwerfen <p>@@hmm</p> <blockquote> <p>ich suche ein HTML Inputfeld, welches:</p> <p>a) Im Ruhezustand den gesamten Inhalt anzeigt. Sollte viel an Inhalt drin stehen, so soll der Inhalt über mehrere Zeilen verteilt werden.</p> </blockquote> <p><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span><span class="token punctuation">></span></span></code></p> <blockquote> <p>Wenn angeklickt, soll so eine Liste angezeigt werden: [] Hauptfach [] Nebenfach [] Wahlfach</p> </blockquote> <p><code><input type="checkbox"></code></p> <blockquote> <p>b) Wenn man in das Inputfeld klickt, soll man ein Menü angezeigt bekommen, in welchem man bestimmte Dinge ankreuzen kann<br> wie würdet ihr sowas realisieren?</p> </blockquote> <p>Gar nicht.</p> <p>Warum sollen die Checkboxen nicht gleich angezeigt werden?</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/sep/28/spezielles-html-inputfeld-entwerfen/1705057#m1705057 hmm 2017-09-28T12:19:54Z 2017-09-28T12:20:51Z Spezielles HTML Inputfeld entwerfen <p>danke, textarea bringt mir schonmal was.</p> <p>damit man im unangeklickten zustand einfacher sehen kann was gewählt wurde. die seite wird wahrscheinlich 10 unangeklickte optionen haben und nur 2-3 angeklickte</p> <p>beispiel</p> <p>geometrie|Hauptfach, Nebenfach</p> <p>wenn ich in die Zelle klicke sehe ich</p> <p>[x] Hauptfach</p> <p>[x] Nebenfach</p> <p>[] Wahlfach</p> <p>Klicke ich wahlfach an so wird das übernommen und ich kriege</p> <p>geometrie | Hauptfach, Nebenfach, Wahlfach</p> <p>wie macht man sowas?</p> https://forum.selfhtml.org/self/2017/sep/28/spezielles-html-inputfeld-entwerfen/1705058#m1705058 hmm 2017-09-28T12:41:06Z 2017-09-28T12:41:06Z Spezielles HTML Inputfeld entwerfen <p>macht man sowas eventuell dadurch dass man mit javascript ein klickevent definiert, welches beim klick die form "textarea" in checkbox umwandelt?</p> https://forum.selfhtml.org/self/2017/sep/28/spezielles-html-inputfeld-entwerfen/1705060#m1705060 Auge 2017-09-28T13:09:34Z 2017-09-28T13:09:34Z Spezielles HTML Inputfeld entwerfen <p>Hallo</p> <blockquote> <p>macht man sowas eventuell dadurch dass man mit javascript ein klickevent definiert, welches beim klick die form "textarea" in checkbox umwandelt?</p> </blockquote> <p>Ich würde ja eher beim Event "Checkbox an- oder abgewählt" den Wert der Checkbox in die Liste schreiben oder daraus löschen, die selbst HTML-seitig unabhängig von den Checkboxen ist. Ob <em>Klick</em> das richtige Event ist (wegen Touch- oder Tastaturbedienung), sei mal dahingestellt.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.<br> Toller Dampf voraus von Terry Pratchett </div> https://forum.selfhtml.org/self/2017/sep/28/spezielles-html-inputfeld-entwerfen/1705071#m1705071 Rolf B 2017-09-28T16:47:33Z 2017-09-28T16:47:33Z Spezielles HTML Inputfeld entwerfen <p>Hallo hmm,</p> <p>Denk dir eine Lösung aus, die auch ohne JavaScript funktioniert. Das wäre ein select mit multiple Option. Oder eine Liste von Checkboxen. Wenn JavaScript aktiv ist, kannst du das für die Anzeige zur textarea umschalten. Vielleicht geht es über den :focus Selektor auch ohne JavaScript. Keine Zeit für ein Beispielfiddle, bin ab jetzt bis Sonntag Abend on Tour.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2017/sep/28/spezielles-html-inputfeld-entwerfen/1705073#m1705073 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-09-28T16:53:43Z 2017-09-28T16:53:59Z Spezielles HTML Inputfeld entwerfen <p>@@Rolf B</p> <blockquote> <p>Das wäre ein select mit multiple Option.</p> </blockquote> <p>Nein, das ist <a href="https://forum.selfhtml.org/self/2015/apr/23/input-kombiniert-mit-abhaengiger-database/1638583#m1638583" rel="noopener noreferrer">keine Option</a>. (Es sei denn, das Ding ist nur für einen selbst oder für einen sehr engen, wohlbekannten Nutzerkreis.)</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/sep/28/spezielles-html-inputfeld-entwerfen/1705089#m1705089 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-09-28T20:25:25Z 2017-09-28T20:25:25Z Spezielles HTML Inputfeld entwerfen <p>@@Rolf B</p> <blockquote> <p>Oder eine Liste von Checkboxen. […] Vielleicht geht es über den :focus Selektor auch ohne JavaScript.</p> </blockquote> <p><code>:focus</code> für die Box (<code>fieldset</code>) um die Checkboxen? Nee, geht nicht. Sobald man eine Checkbox fokussiert, verliert die umschließende Box ja den Fokus.</p> <p>Was aber geht: <code>:focus-within</code> [<a href="https://drafts.csswg.org/selectors-4/#the-focus-within-pseudo" rel="nofollow noopener noreferrer">Selectors Level 4 ED</a>] – in <a href="http://caniuse.com/#feat=css-focus-within" rel="noopener noreferrer">unterstützenden Browsern</a> als <em lang="en">progressive enhancement</em>.</p> <blockquote> <p>Keine Zeit für ein Beispielfiddle, bin ab jetzt bis Sonntag Abend on Tour.</p> </blockquote> <p>Codepen: <a href="https://codepen.io/gunnarbittersmann/pen/VMbNpp" rel="noopener noreferrer">Away team</a></p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/sep/28/spezielles-html-inputfeld-entwerfen/1705094#m1705094 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-09-29T07:01:00Z 2017-09-29T07:07:25Z Spezielles HTML Inputfeld entwerfen <p>@@Gunnar Bittersmann</p> <blockquote> <p>Was aber geht: <code>:focus-within</code> [<a href="https://drafts.csswg.org/selectors-4/#the-focus-within-pseudo" rel="nofollow noopener noreferrer">Selectors Level 4 ED</a>] – in <a href="http://caniuse.com/#feat=css-focus-within" rel="noopener noreferrer">unterstützenden Browsern</a> als <em lang="en">progressive enhancement</em>.</p> <p>Codepen: <a href="https://codepen.io/gunnarbittersmann/pen/VMbNpp" rel="noopener noreferrer">Away team</a></p> </blockquote> <p>Und so geht’s:</p> <pre><code class="block language-css"><span class="token selector">.multiple-select-widget:not(:hover):not(:focus-within) input, .multiple-select-widget:not(:hover):not(:focus-within) :not(:checked) + span</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Wenn der Mauscursor nicht über der umschließenden Box liegt (<code class="language-css"><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span><span class="token punctuation">:</span>hover<span class="token punctuation">)</span></code>) und weder sie noch eine Checkbox den Fokus hat (<code class="language-css"><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span><span class="token punctuation">:</span>focus-within<span class="token punctuation">)</span></code>), dann werden alle Checkboxen (<code class="language-css">input</code>) und alle Beschriftungen nicht-angehakter Checkboxen (<code class="language-css"><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span><span class="token punctuation">:</span>checked<span class="token punctuation">)</span> + span</code>) ausgeblendet. Sichtbar bleiben also die Beschriftungen aller angehakter Checkboxen.</p> <p>Wenn der Mauscursor über der umschließenden Box liegt oder sie oder eine Checkbox den Fokus hat, dann sind alle Checkboxen mit ihren Beschriftungen zu sehen. Wenn ein Browser <code class="language-css"><span class="token punctuation">:</span>focus-within</code> nicht unterstützt, dann auch.</p> <p>Der Rest der Regeln ist Schmuck am Kleid.</p> <p>LLAP </p> <p>PS: Das <code>div</code> habe ich eingefügt, weil WebKits sich beharrlich weigern, <code>display: flex</code> auf <code>fieldset</code> anzuwenden. Meh.</p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/sep/28/spezielles-html-inputfeld-entwerfen/1705095#m1705095 hmm 2017-09-29T07:09:50Z 2017-09-29T07:09:50Z Spezielles HTML Inputfeld entwerfen <p>moin,</p> <p>danke, ich versuch das zu verstehen, ich poste dann das beispiel.</p> <pre><code class="block language-css"><span class="token selector">.multiple-select-widget:not(:hover):not(:focus-within) input, .multiple-select-widget:not(:hover):not(:focus-within) :not(:checked) + span</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>das würde ich jetzt einfach an son ganz normales select html feld kleben?</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>gebootstrapedWeilWenigAhnungVonCss<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>ichVersteheDenMultipleFocusWithinNet<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">selected</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selected<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Hauptfach <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">selected</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selected<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Nebenfach <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span> Wahlfach <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2017/sep/28/spezielles-html-inputfeld-entwerfen/1705096#m1705096 hmm 2017-09-29T07:13:19Z 2017-09-29T07:13:19Z Spezielles HTML Inputfeld entwerfen <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">leng</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<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>title</span><span class="token punctuation">></span></span>fieldset and legend example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">.multiple-select-widget:not(:hover):not(:focus-within) input, .multiple-select-widget:not(:hover):not(:focus-within) :not(:checked) + span</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>gebootstrapedWeilWenigAhnungVonCss<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>ichVersteheDenMultipleFocusWithinNet<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">selected</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selected<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Hauptfach <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">selected</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selected<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Nebenfach <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span> Wahlfach <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>so ist das wahrscheinlich nicht gedacht oder?</p> https://forum.selfhtml.org/self/2017/sep/28/spezielles-html-inputfeld-entwerfen/1705100#m1705100 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-09-29T08:19:07Z 2017-09-29T08:19:07Z Spezielles HTML Inputfeld entwerfen <p>@@hmm</p> <blockquote> <p>das würde ich jetzt einfach an son ganz normales select html feld kleben?</p> </blockquote> <p>Natürlich. Nicht.</p> <p>Hast du ein Grundverständnis davon, wie CSS und Selektoren funktionieren? Wenn nicht, wäre jetzt ein guter Zeitpunkt, das nachzuholen.</p> <p>Und wie ich schon sagte, solltest du ganz schnell vergessen, dass es <code class="bad">multiple</code> für <code>select</code> gibt. Es sei denn, du weißt sehr genau, was du tust. Mit Betonung auf „du“. Und damit ist nicht der Zeitpunkt der Entwicklung der Webseite gemeint, sondern deren Anwendung.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/sep/28/spezielles-html-inputfeld-entwerfen/1705151#m1705151 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-09-29T16:34:29Z 2017-09-29T16:34:29Z Spezielles HTML Inputfeld entwerfen <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Und wie ich schon sagte, solltest du ganz schnell vergessen, dass es <code class="bad">multiple</code> für <code>select</code> gibt. Es sei denn, du weißt sehr genau, was du tust. Mit Betonung auf „du“. Und damit ist nicht der Zeitpunkt der Entwicklung der Webseite gemeint, sondern deren Anwendung.</p> </blockquote> <p>@hmm</p> <p>Es sei denn, du schreibst eine Bedienungsanleitung daneben mit dem Hinweis, dass es ohne Maus und Tastatur nicht funktioniert.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div>