tag:forum.selfhtml.org,2005:/self in Textarea strings sammeln, dannach in die Zwischenablage kopieren – SELFHTML-Forum 2021-01-05T11:58:54Z https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779850#m1779850 Joachim 2021-01-02T16:50:56Z 2021-01-03T07:24:19Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>Hallo und frohes Neues allerseits.</p> <p>Ich habe folgendes Problem: auf der Arbeit muss ich zwecks Dokumentation die Namen & LOT-Nummern der verwendeten Matrialien notieren, wobei ich bei unterschiedlichen Aufgaben unterschiedlich viele Materialien benutze (ca. 45 verschiedene Materialien).</p> <p>Zur Arbeitserleichterung will ich mir eine einfache Webseite machen, die ich mit diversen Buttons, die jeweils für ein Material stehen, versehe. Beim clicken auf ein oder mehrere Buttons soll in einer Textarea alles angezeigt werden - pro Zeile ein Material samt LOT-Nr. Darunter ein Button zum kopieren des gesamten Textes in die Zwischenablage und danach löschen des Inhaltes der Textarea.</p> <p>Mein Ansatz: jeden Button mit einer id belegen, dann mit einem onclick eine Funktion aufrufen. Die id wird in eine var (string) umgewandelt. Anschließend wird diese var zu einer anderen var (ebenfalls ein string, aber global) hinzugefügt, die nun in die textarea hineinkopiert wird.</p> <p>Bsp:</p> <ol> <li>Listen-Text hier</li> <li>click auf Button afa2 -> function -> id = var1 (afa2); varZeig = var1 (afa2) + varVorhanden(); varZeig wird in textarea anzeigt : (afa2)</li> </ol> <p>dannach 2. click auf Button afa3 -> function -> id =var1 (afa3); varZeig = var1 (afa3) + varVorhanden(afa2); VarZeig wird in textarea angezeigt : (afa2 afaf3)</p> <p>Danach click auf den Kopierbutton, wobei der Text in die Zwischenablage kopiert und das textarea geleert wird.</p> <p>Wie ihr euch nun denken könnt, habe ich mich erst jetzt in HTML und JS eingelesen und kann fast nichts...</p> <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 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>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>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'MatLot'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value <span class="token operator">=</span> afa2</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> flow 2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'MatLot'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value <span class="token operator">=</span> afa3</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> flow 3 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'MatLot'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value <span class="token operator">=</span> afa35</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> flow 3,5 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</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>MatLot<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>75<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Verwendete Materialien<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>textarea</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</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">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Paste here, to try!<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>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</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> Testtext Überschrift<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>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Copy text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">var</span> afa2 <span class="token operator">=</span> <span class="token string">"flow a2 lot: 12345 \n"</span><span class="token punctuation">;</span> <span class="token keyword">var</span> afa3 <span class="token operator">=</span> <span class="token string">"flow a3 lot: 23456 \n"</span><span class="token punctuation">;</span> <span class="token keyword">var</span> afa35 <span class="token operator">=</span> <span class="token string">"flow a3,5 lot: 34567 \n"</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> copyText <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"MatLot"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> copyText<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> copyText<span class="token punctuation">.</span><span class="token function">setSelectionRange</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">99999</span><span class="token punctuation">)</span> document<span class="token punctuation">.</span><span class="token function">execCommand</span><span class="token punctuation">(</span><span class="token string">"copy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//alert("Copied the text: " + copyText.value);</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</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> Quelltext hier </code></pre> <p>Könnte mir jemand bitte helfen?</p> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779866#m1779866 Rolf B 2021-01-02T22:26:14Z 2021-01-02T22:26:14Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>Hallo Joachim,</p> <p>sowas kann man machen - aber ist es die beste Idee?</p> <p>Ich frage mich: Klickst Du die Buttons in unterschiedlichen Reihenfolgen, um auch eine bestimmte Reihenfolge in der Doku zu erhalten? Oder ist die Reihenfolge egal - vielleicht sogar vorgegeben, in der die Materialien im Dokument erscheinen sollten?</p> <p>In dem Fall wäre es besser, Checkboxen statt Buttons zu verwenden, von denen Du die benötigten anhakst. Und ja, natürlich braucht jeder der Buttons dafür eine ID.</p> <p>Schließen sich bestimmte Materialien gegenseitig aus? In dem Fall könntest Du sie zu einer Radiobutton-Gruppe zusammenfassen (das macht man, indem man mehreren Radiobuttons das gleiche name Attribut gibt)</p> <p>Gibt es Mengenangaben? Die könnte man noch hinzufügen.</p> <p>Am Ende hast Du dann nur noch einen Button: COPY. Hinter dem liegt dann JavaScript, dass die Checkboxen-/Radiobuttons abklappert und dementsprechend den Text zusammenbaut. Den schreibst Du in die <textarea> und kopierst es ins Clipboard. Die textarea selbst kannst Du verstecken, die braucht keiner zu sehen (mit position:absolute; left: -10000px; ins Nirvana verschieben).</p> <p>Ich würde vorschlagen: Wie man das genau tut, besprechen wir, wenn wir deine fachlichen Wünsche unabhängig von deinen technischen Ideen diskutiert haben.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779870#m1779870 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-01-03T09:14:31Z 2021-01-03T09:14:31Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>@@Rolf B</p> <blockquote> <p>Die textarea selbst kannst Du verstecken, die braucht keiner zu sehen (mit position:absolute; left: -10000px; ins Nirvana verschieben).</p> </blockquote> <h3> </h3><p><strong>Nei-en!</strong> Verstecken, ja, aber <strong>doch nicht so!</strong> <a href="http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/" rel="nofollow noopener noreferrer">Aus Gründen.</a></p> <p>Übrigens braucht man die die Textarea nicht zu verstecken, sondern gar nicht.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p>Man kopiert den generierten String direkt in die Zwischenablage. ☞ <a href="https://codepen.io/gunnarbittersmann/pen/JjdVypX" rel="noopener noreferrer">Beispiel</a></p> <p>In Browsern, die das nicht unterstützen, gibt man den String aus – und zwar nicht in einem <em>Eingabe</em>element (was <code class="bad">textarea</code> ja ist), sondern in einem <em>Ausgabe</em>element: <code class="good">output</code>.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“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.”</em> —John Lennon </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://de.wikipedia.org/wiki/Zeugma_(Sprache)" rel="nofollow noopener noreferrer">Zeugma</a>-Alarm <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779957#m1779957 Joachim 2021-01-04T21:37:10Z 2021-01-04T21:37:10Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>Hi Rolf,</p> <p>ich beantworte mal kurz deine Fragen:</p> <ul> <li>die Reihenfolge wie ich die Buttons drücke spielt keine Rolle</li> <li>ja Checkboxen gingen glaube ich auch, würde die Materialien dann aber sinnvoll gruppieren wollen nach Abläufen, da bei unterschiedlichen Abläufen, bis auf ein Material, kaum die gleichen Materialien benutzt werden</li> </ul> <p>Bsp: ich gebrauche Mat1, Mat2; Mat5; Mat7, aber wenn ich erst die 1, dann die 7, 5 und 2 anklicke spielt keine Rolle</p> <ul> <li>Mengenangaben sind nicht relevant, nur das Material mit seiner LOT-Nr.</li> </ul> <p>Die Textarea würde ich gern behalten, falls ich evtl noch was ergänzen muss, bevor ich den Copy-Button drücke</p> <p>Was für eine Info brächtest du noch?</p> <p>Gruß Joachim</p> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779962#m1779962 Joachim 2021-01-04T23:06:54Z 2021-01-04T23:06:54Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>Hallo nochmal an alle,</p> <p>danke dafür, dass ihr euch damit auseinandersetzt. Habe auch so einiges dazugelernt </p> <p>Ich habe gesehen, da stand noch der Browser im Raum - es ist Edge und Firefox installiert. Zugang zum Internet gibt es keinen - nur Intranet.</p> <p>Wie gesagt es muss nichts hochkomplexes sein, auch keine besondere Formatierung. Reiner Text reicht. Nur je nachdem was es für ein Ablauf ist, werden verschiedene und unterschiedlich viele Materialien gebraucht. Dabei spielt die Menge und die Häufigkeit keine Rolle.</p> <p>Ach und es wäre gut, wenn ich die LOT-Nr. neu eintrage/warte, dass es nicht zu arg verstreut im Quelltext verstreut liegt Deswegen habe ich ja auch alle als Variablen deklariert. So sind sie alle am gleichen Ort.</p> <p>Gruß Joachim</p> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779872#m1779872 Der Martin 2021-01-03T09:38:10Z 2021-01-03T09:38:10Z Zeugma <p>Hallo Gunnar,</p> <blockquote> <p><a href="https://de.wikipedia.org/wiki/Zeugma_(Sprache)" rel="nofollow noopener noreferrer">Zeugma</a>-Alarm</p> </blockquote> <p>und wieder was gelernt, vielen Dank.<br> Die rhetorische Figur kannte ich natürlich, wusste aber bis eben nicht, wie sie heißt. <s>TIL</s> TYL?</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Es soll vorkommen, dass die Nachkommen mit dem Einkommen ihrer Vorfahren nicht auskommen. </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779896#m1779896 Rolf B 2021-01-03T12:36:05Z 2021-01-03T17:39:54Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>Hallo Gunnar,</p> <p>unterm Strich: Ja, Clipboard API ist besser. Ich war gestern abend nur zu doof dafür.</p> <p>Ansonsten: Du ärgerst mich.</p> <blockquote> <p>Nei-en! Verstecken, ja, aber doch nicht so! Aus Gründen.</p> </blockquote> <p>Probierst Du den Mist, den Du da vorschlägst, eigentlich selber aus? Oder geht's Dir nur darum, mir aus Prinzip erstmal zu widersprechen? In letzter Zeit habe ich diesen Eindruck. Der Vorschlag mag für ein <p> sinnvoll sein, aber nicht für eine Textarea.</p> <ul> <li>die Textarea belegt nach wie vor Platz</li> <li>man sieht den Rand der Textarea</li> <li>man sieht das resize-Handle</li> <li>man kann in die textarea hineintabben, und dann wird ihr Textinhalt sichtbar.</li> <li>ist die Textarea nicht off-screen positioniert, kann man hineinklicken</li> <li>ein Screenreader bietet Dir die Textarea vermutlich immer noch an.</li> </ul> <p>Das ist also eine für diesen Zweck sehr unpassende Idee, und entscheidende Fehler bleiben. Genau die, gegen die Du immer antrittst: Accessibility und Tastaturbedienung.</p> <p>Man kann die genannten Probleme allesamt mit HTML-Attributen oder CSS-Eigenschaften lösen, aber eins bleibt: um nicht hineinklicken zu können, <strong>muss</strong> die textarea off-screen platziert werden, oder hinter ein anderes Element, und damit ist das ganze visuelle Gedönsrath egal.</p> <p>Ich würde daher diese Methode vertreten: tabindex="-1", aria-hidden="true" und per CSS noch width:1px; left:-10px; position:absolute. Damit sollte das Hauptargument deiner verlinkten Seite beseitigt sein: Performance (die sich nur auf lahmarschigen Geräten bei Animationen zeigen dürfte).</p> <p>(Edit: -1px in 1px geändert)</p> <blockquote> <p>Man kopiert den generierten String direkt in die Zwischenablage</p> </blockquote> <p>Ja, das ist natürlich besser, und das hatte ich auch ausprobiert. Mit Chrome. Und da funktionierte es nicht:</p> <blockquote> <p>pen.js:21 Async: Could not copy to clipboard: DOMException: The Clipboard API has been blocked because of a Feature Policy applied to the current document. See https://goo.gl/EuHzyv for more details.</p> </blockquote> <p>Das passiert in jsFiddle und Codepen gleichermaßen. Firefox kennt diese Feature Policy (noch) nicht, darum hast Du das nicht bemerkt, würde ich annehmen.</p> <p>Das war gestern abend; da war ich wohl zu verschnarcht, einfach mal eine lokale HTML Seite daraus zu machen statt es in einem Fiddle zu probieren. Ohne iframe geht es auch in Chrome - offenbar ist das clipboard-write Feature auf einer ungeframten Seite per Default eingeschaltet (ich hab mal probehalber einen Feature Policy Header gesetzt, und konnte es damit verhindern)</p> <p>Deshalb bin ich gestern erstmal bei der textarea geblieben (und kein output, weil es die select/setSelectedRange Methoden nur in Eingabeelementen gibt).</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779928#m1779928 Der Martin 2021-01-03T22:02:55Z 2021-01-03T22:02:55Z Kein Zeugma, aber ähnlich <p>Hallo Gunnar,</p> <blockquote> <p>Übrigens braucht man die die Textarea nicht zu verstecken, sondern gar nicht.</p> </blockquote> <p>in Anlehnung daran:</p> <p>Was hat der Soldat unterm Bett?<br> Zu putzen!</p> <p>Kein Zeugma nach der eigentlichen Definition, aber eine ähnliche Konstruktion.<br> Hat diese sprachliche Wendung auch eine besondere Bezeichnung? Kennt sich jemand aus?</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Es soll vorkommen, dass die Nachkommen mit dem Einkommen ihrer Vorfahren nicht auskommen. </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779874#m1779874 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-01-03T09:45:57Z 2021-01-03T09:45:57Z Zeugma <p>@@Der Martin</p> <blockquote> <p>TYL?</p> </blockquote> <p><a href="https://forum.selfhtml.org/search?search%5Bterm%5D=author%3Agunnar+zeugma&search%5Bsections%5D%5B%5D=1&search%5Bstart_date%5D=1980-01-03&search%5Bend_date%5D=2021-01-03&search%5Border%5D=date#results" rel="noopener noreferrer">Nö.</a></p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“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.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779881#m1779881 Henry 2021-01-03T10:33:16Z 2021-01-03T10:33:16Z Zeugma <p>Hallo Der,</p> <p><a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a></p> <blockquote> <blockquote> <p><a href="https://de.wikipedia.org/wiki/Zeugma_(Sprache)" rel="nofollow noopener noreferrer">Zeugma</a>-Alarm</p> </blockquote> <p>und wieder was gelernt, vielen Dank.</p> </blockquote> <p>dto. Diese Art von Wortspielerei fällt mir oft bei Jürgen von der Lippe auf, hätte aber nie gedacht, dass es dafür eine Bezeichung gibt.</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779878#m1779878 Der Martin 2021-01-03T10:24:39Z 2021-01-03T10:24:39Z Zeugma <p>Hallo,</p> <blockquote> <blockquote> <p>TYL?</p> </blockquote> <p><a href="https://forum.selfhtml.org/search?search%5Bterm%5D=author%3Agunnar+zeugma&search%5Bsections%5D%5B%5D=1&search%5Bstart_date%5D=1980-01-03&search%5Bend_date%5D=2021-01-03&search%5Border%5D=date#results" rel="noopener noreferrer">Nö.</a></p> </blockquote> <p>okay, okay - ich glaub's ja schon.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Es soll vorkommen, dass die Nachkommen mit dem Einkommen ihrer Vorfahren nicht auskommen. </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779888#m1779888 Tabellenkalk 2021-01-03T11:23:25Z 2021-01-03T11:23:25Z Zeugma <p>Hallo,</p> <blockquote> <p>Diese Art von Wortspielerei fällt mir oft bei Jürgen von der Lippe auf,</p> </blockquote> <p>Heinz Erhardt wäre jetzt mein Paradebeispiel gewesen.</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779897#m1779897 Rolf B 2021-01-03T12:37:17Z 2021-01-03T12:37:17Z Zeugma <p>Hallo Tabellenkalk,</p> <p>ja, er hatte die Stirn, sie zu runzeln... </p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779901#m1779901 Der Martin 2021-01-03T13:01:34Z 2021-01-03T13:01:34Z Zeugma <p>Hi,</p> <blockquote> <blockquote> <p>Diese Art von Wortspielerei fällt mir oft bei Jürgen von der Lippe auf</p> </blockquote> </blockquote> <p>als studierter Germanist sollte er sich mit sowas auskennen. Ja, die deutsche Sprache beherrscht er wirklich ganz hervorragend, das ist mir auch schon aufgefallen.</p> <blockquote> <p>Heinz Erhardt wäre jetzt mein Paradebeispiel gewesen.</p> </blockquote> <p>Meins auch, der hatte offenbar großen Spaß an Zeugmata und hat sie gern und oft verwendet.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Es soll vorkommen, dass die Nachkommen mit dem Einkommen ihrer Vorfahren nicht auskommen. </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779900#m1779900 Der Martin 2021-01-03T12:58:18Z 2021-01-03T12:58:18Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>Hallo Rolf,</p> <p>lass mich nur auf zwei kleine technische Details eingehen.</p> <blockquote> <p>[...] und per CSS noch width:-1px; left:-10px; position:absolute.</p> </blockquote> <p>das ist teilweise ungültig: Die Werte für width oder height dürfen nicht negativ sein.</p> <blockquote> <blockquote> <p>pen.js:21 Async: Could not copy to clipboard: DOMException: The Clipboard API has been blocked because of a Feature Policy applied to the current document. See https://goo.gl/EuHzyv for more details.</p> </blockquote> <p>Das passiert in jsFiddle und Codepen gleichermaßen. Firefox kennt diese Feature Policy (noch) nicht, darum hast Du das nicht bemerkt, würde ich annehmen.</p> </blockquote> <p>Firefox und Chrome verhalten sich offenbar unterschiedlich, wenn das Feature "Clipboard Access" deaktiviert ist. Firefox leugnet dann komplett, dieses Feature überhaupt zu kennen; eine Feature-Abfrage liefert daher ein sinnvolles Ergebnis. Chrome dagegen scheint bei der Feature-Abfrage zu sagen: "Yo, kenn ich", fällt dann aber auf die Schnauze, wenn man es wirklich benutzt.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Es soll vorkommen, dass die Nachkommen mit dem Einkommen ihrer Vorfahren nicht auskommen. </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779918#m1779918 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-01-03T17:14:38Z 2021-01-03T17:14:38Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>@@Rolf B</p> <blockquote> <p>unterm Strich: Ja, Clipboard API ist besser. Ich war gestern abend nur zu doof dafür.</p> <p>Ansonsten: Du ärgerst mich.</p> </blockquote> <p>Mir kommt’s eher so vor, als ärgertest du dich über dich selbst und lässt deinen Ärger an mir aus.</p> <blockquote> <blockquote> <p>Nei-en! Verstecken, ja, aber doch nicht so! Aus Gründen.</p> </blockquote> <p>Probierst Du den Mist, den Du da vorschlägst, eigentlich selber aus?</p> </blockquote> <p>Bezüglich des Versteckens habe ich überhaupt nichts vorgeschlagen. Wenn, dann wäre es selbstverständlich das <code>hidden</code>-Attribut gewesen: Das Element wird nicht angezeigt, ist nicht im <em lang="en">accessibility tree</em>, aber per Script erreichbar.</p> <p>Mein Vorschlag war ganz einfach: das <code>textarea</code>-Element gar nicht erst einsetzen, weil nicht notwendig.</p> <p>Übrigens, was Mist ist: HTML-Elemente zu missbrauchen – z.B. Eingabeelemente zur Ausgabe.</p> <blockquote> <blockquote> <p>Man kopiert den generierten String direkt in die Zwischenablage</p> </blockquote> <p>Ja, das ist natürlich besser, und das hatte ich auch ausprobiert. Mit Chrome. Und da funktionierte es nicht:</p> <blockquote> <p>pen.js:21 Async: Could not copy to clipboard: DOMException: The Clipboard API has been blocked because of a Feature Policy applied to the current document. See https://goo.gl/EuHzyv for more details.</p> </blockquote> <p>Das passiert in jsFiddle und Codepen gleichermaßen. Firefox kennt diese Feature Policy (noch) nicht, darum hast Du das nicht bemerkt, würde ich annehmen.</p> <p>Das war gestern abend; da war ich wohl zu verschnarcht, einfach mal eine lokale HTML Seite daraus zu machen statt es in einem Fiddle zu probieren. Ohne iframe geht es auch in Chrome</p> </blockquote> <p>Ich hab das <a href="https://bittersmann.de/samples/workdays/" rel="nofollow noopener noreferrer">Beispiel aus den Zwängen von CodePens Iframes befreit</a> – läuft auch in Chromia.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“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.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779919#m1779919 Rolf B 2021-01-03T17:39:19Z 2021-01-03T17:39:19Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>Hallo Der,</p> <blockquote> <p>das ist teilweise ungültig: Die Werte für width oder height dürfen nicht negativ sein.</p> </blockquote> <p>Wohl wahr. Das war ein Typo.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779902#m1779902 Tabellenkalk 2021-01-03T13:24:25Z 2021-01-03T13:24:25Z Zeugma <p>Hallo,</p> <blockquote> <p>Es soll vorkommen, dass die Nachkommen mit dem Einkommen ihrer Vorfahren nicht auskommen.</p> </blockquote> <p>... und daher vollkommen umkommen!</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779923#m1779923 Rolf B 2021-01-03T18:09:04Z 2021-01-03T18:09:04Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>Hallo Gunnar,</p> <blockquote> <p>als ärgertest du dich über dich selbst</p> </blockquote> <p>Wieso sollte ich? Weil Du an jedem Beitrag von mir was zum kritteln findest? Auf eine Art, die durchaus nervig ist:</p> <blockquote> <p>Nei-en! Verstecken, ja, aber doch nicht so! Aus Gründen.</p> </blockquote> <blockquote> <p>Bezüglich des Versteckens habe ich überhaupt nichts vorgeschlagen</p> </blockquote> <p>Ach so. Und ich dachte, du hättest den Link mit Absicht gesetzt. Dass es nur um die Gründe gegen off-screen Platzierung ging, und nicht um eine bessere Verstecktechnik, war mir nicht so ganz klar.</p> <p>Abgesehen davon hat sich die Diskussion zweigeteilt: (1) wie versteckt man eine textarea so, dass Joachims Ansatz noch funktioniert und (2) was ist die bessere Idee für Joachim.</p> <p>Zu (1) funktioniert weder hidden noch display:none, weil dann ein .select() gefolgt vom copy-Command nichts mehr tut. Will man also mit der textarea als Fallback arbeiten, weil das clipboard-Feature aus irgendeinem Grund nicht nutzbar ist, oder weil man keine APIs nutzen will die als "experimentell" gekennzeichnet sind, bleibt nur off-screen Platzierung. Oder hättest Du einen besseren Fallback im Angebot? Außer: Schreiben in ein <output> und den User veranlassen, selbst zu kopieren - das wäre wohl nicht im Sinne der Klickminimierung. Wir reden hier ja von einer sehr speziellen Anwendung.</p> <p>Solange das Feature vorhanden ist, ist writeText natürlich besser. Das Vorhandensein hat Joachim selbst in der Hand: er muss einen aktuellen Browser verwenden und er darf den Feature Policy Header nicht senden, der das Clipboard deaktiviert.</p> <p>So, und nun sollten wir mal abwarten, was meine Rückfrage an ihn ergibt, bevor wir den Thread mit Diskussion füllen und der TO kopfschüttelnd wegläuft.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779927#m1779927 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-01-03T18:42:07Z 2021-01-03T18:42:07Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>@@Rolf B</p> <blockquote> <p>Wieso sollte ich? Weil Du an jedem Beitrag von mir was zum kritteln findest?</p> </blockquote> <p>Liegt das nun an mir oder an deinen Beiträgen? </p> <blockquote> <p>Auf eine Art, die durchaus nervig ist:</p> <blockquote> <p>Nei-en! Verstecken, ja, aber doch nicht so! Aus Gründen.</p> </blockquote> </blockquote> <p>Der Artikel von Zeldman ist fast 9 Jahre alt und wurde hier unzählige Male verlinkt. Der kann kaum an dir vorbeigegangen sein.</p> <p>Mag mag mir nachsehen, etwas genervt zu sein, wenn man hier immer wieder dasselbe erzählen muss. Immer wieder dasselbe. Immer wieder …</p> <blockquote> <p>Dass es nur um die Gründe gegen off-screen Platzierung ging, und nicht um eine bessere Verstecktechnik, war mir nicht so ganz klar.</p> </blockquote> <p>Ich schrieb „doch nicht so“. (Hätte es vielleicht fett hervorheben sollen?) Ich schrieb nichts von „sondern anders“.</p> <blockquote> <p>Abgesehen davon hat sich die Diskussion zweigeteilt: (1) wie versteckt man eine textarea so, dass Joachims Ansatz noch funktioniert</p> </blockquote> <p>Ich hatte nie die Absicht, darüber zu diskutieren, weil das mit</p> <blockquote> <p>(2) was ist die bessere Idee für Joachim.</p> </blockquote> <p>hinfällig ist.</p> <p>Deswegen hatte ich auch das <code>hidden</code>-Attribut als bessere Verstecktechnik hier nicht getestet. Wozu auch?</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“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.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779960#m1779960 Rolf B 2021-01-04T22:02:17Z 2021-01-04T22:02:17Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>Hallo Joachim,</p> <p>wenn es wirklich nötig ist, den generierten Text nachzubearbeiten, dann mach die Textarea.</p> <p>Aber wenn Du nur eine Notiz am Ende brauchst, sollte die Textarea nur dafür sein.</p> <p>Einen "Verklicker" rauslöschen brauchst Du ja nicht, dafür machst Du einfach die Checkbox wieder aus.</p> <p>Verwendest Du einen modernen Browser? Dann solltest Du Dir Gunnars Vorschlag mit dem Clipboard-API wirklich zu Herzen nehmen.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779963#m1779963 Joachim 2021-01-04T23:11:11Z 2021-01-04T23:11:11Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>Hallo Rolf,</p> <p>ja ich werde mich mal die Tage mit der Checkbox auseinandersetzen und auch mal gucken was es mit der Clipboard-API zu tun hat.</p> <p>Wir wohl doch anders als gedacht und ist definitiv schwieriger als vermutet.</p> <p>Vielen Dank für die Vorschläge.</p> <p>Ich halte euch auf dem Laufenden.</p> <p>Gruß</p> <p>Joachim</p> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779969#m1779969 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-01-05T05:08:18Z 2021-01-05T05:08:18Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>@@Rolf B</p> <blockquote> <p>wenn es wirklich nötig ist, den generierten Text nachzubearbeiten, dann mach die Textarea.</p> <p>Aber wenn Du nur eine Notiz am Ende brauchst, sollte die Textarea nur dafür sein.</p> </blockquote> <p>Gute Idee.</p> <p>Und je nach benötigter Länge für die Notiz tut’s dann vielleicht auch ein einzeiliges <code>input</code> anstatt der mehrzeiligen <code>textarea</code>.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“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.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779980#m1779980 Rolf B 2021-01-05T09:49:31Z 2021-01-05T10:25:26Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>Hallo Joachim,</p> <p>wenn Du auf zentrale Wartung Wert legst, dann solltest Du vielleicht noch etwas länger nachdenken, bevor Du loslegst. Du hast - wie es scheint - für jedes Material den Text, der zum Button / zur Checkbox gehört, und du hast den Text, der in der Doku erscheinen soll. Diese Texte sind nicht die Gleichen, wenn ich mir dein Beispiel zu Anfang anschaue.</p> <p>Im schlimmsten Fall hast Du pro Checkbox 3 Werte: Eine ID, eine Checkbox-Beschriftung und einen Dokumentationseintrag. Wenn ich dein Eingangsbeispiel anschaue, wäre eine solche Dreiergruppe zum Beispiel "afa2", "flow 2" und "flow a2 lot: 12345". Oder "afa35", "flow a3,5 lot: 34567".</p> <p>So etwas kann man in einem Objekt speichern:</p> <pre><code class="block language-js"><span class="token keyword">const</span> materialListe <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string-property property">"afa2"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"flow 2"</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"flow a2, lot: 12345"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string-property property">"afa3"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"flow 3"</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"flow a3, lot: 23456"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string-property property">"afa35"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"flow 3,5"</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"flow a3,5, lot: 34567"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// und so weiter</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> <p>Wenn Du deine Checkboxen (oder Radiobuttons) nach einem einheitlichen Schema im HTML aufbaust, zum Beispiel 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 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>checkbox<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>afa2<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 punctuation">></span></span> <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">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<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>afa47<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 punctuation">></span></span> </code></pre> <p>dann kann man dafür sorgen, dass die Anzeigetexte aus dem Materialienobjekt automagisch eingesteuert werden. Dazu entfernt man die Texte aus dem HTML und setzt einen leeren span an ihre Stelle:</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 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>checkbox<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>afa2<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 punctuation">></span></span><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>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">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<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>afa47<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 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>Man könnte den Span auch weglassen und im JavaScript Text anhängen. Ein Span schafft aber einen klarer definierten Platzhalter für den Text.</p> <p>Mit einer Prise JavaScript setzt man die Texte ein:</p> <pre><code class="block language-js"><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> materialElement <span class="token keyword">of</span> <span class="token function">materialWähler</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> materialElement<span class="token punctuation">.</span>element <span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">"label"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"span"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> materialElement<span class="token punctuation">.</span>material<span class="token punctuation">.</span>label<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span><span class="token operator">*</span> <span class="token function">materialWähler</span><span class="token punctuation">(</span><span class="token parameter">checkedOnly <span class="token operator">=</span> <span class="token boolean">false</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> selektor <span class="token operator">=</span> <span class="token string">"label > input[name]"</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>checkedOnly<span class="token punctuation">)</span> selektor <span class="token operator">+=</span> <span class="token string">":checked"</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> element <span class="token keyword">of</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span>selektor<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> material<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>type <span class="token operator">==</span> <span class="token string">"checkbox"</span><span class="token punctuation">)</span> material <span class="token operator">=</span> materialListe<span class="token punctuation">[</span>element<span class="token punctuation">.</span>name<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>type <span class="token operator">==</span> <span class="token string">"radio"</span><span class="token punctuation">)</span> material <span class="token operator">=</span> materialListe<span class="token punctuation">[</span>element<span class="token punctuation">.</span>value<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>material<span class="token punctuation">)</span> <span class="token keyword">yield</span> <span class="token punctuation">{</span> element<span class="token punctuation">,</span> material <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>materialWähler ist als <code>function*</code> definiert, das ist eine <a href="https://wiki.selfhtml.org/wiki/JavaScript/Iterator" rel="nofollow noopener noreferrer">Generator-Funktion</a>. Ein Generator kann in einer Schleife eine Liste von Werten zurückgeben, die zum Beispiel in einer (for...of) Schleife verarbeitet werden können. Generatoren sind ungemein praktisch, um Erzeugung und Verarbeitung einer Liste von Werten sauber zu trennen, ohne die Liste dafür zwischenspeichern zu müssen. Mehr dazu im verlinkten Wiki-Artikel.</p> <p><code>materialWähler</code> baut zunächst einen CSS Selektor für die gesuchten Input-Elemente auf. Das ist zunächst "label > input[name]", also alle input-Elemente mit einem name-Attribut, die ein label als Elternelement haben. Wird der Funktion <code>true</code> übergeben, wird noch ein :checked hinzugefügt, d.h. nur die Checkboxen oder Radiobuttons ausgewählt, die angehakt sind. Dadurch kannst Du die Funktion wahlweise für alle Inputs oder nur für die gerade ausgewählten Inputs verwenden.</p> <p>Anhand des erzeugten CSS Selectors sucht <code>materialWähler</code> mittels <code>querySelectorAll</code> die Input-Elemente heraus. Die Zuordnung zum Material unterscheidet sich bei Checkbox und Radiobuttons, weil in einer Gruppe Radiobuttons alle inputs den gleichen Namen haben. Darum wird für Checkboxen über name gesucht und für Radiobuttons über value. Ist es keins von beiden, bleibt material leer. Wurde ein Material zum input Element gefunden, wird ein kleines Objekt aufgebaut, das Element und Material enthält, und per yield bereitgestellt.</p> <p>Die for...of Schleife im Hauptprogramm durchläuft die vom Generator bereitgestellten Ergebnisse. Jeder Treffer ist ein Pärchen aus Element und Materialdefinition, und nun muss nur noch das span-Element gesucht werden und der Label-Text eingetragen werden. Dafür wird zunächst mit closest zum Label navigiert und von dort mit querySelector zum span.</p> <p>Später, wenn der "Dokumentation generieren" Button geklickt wird, rufst Du <code>materialWähler(true)</code> auf, gehst die Ergebnisse ebenfalls mit for...of durch und baust die Inhalte der text-Eingeschaft aus der Materialliste zusammen.</p> <p>Hier das Ganze in einem Fiddle: <a href="https://jsfiddle.net/Rolf_b/qb5dtysc/" rel="noopener noreferrer">https://jsfiddle.net/Rolf_b/qb5dtysc/</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779970#m1779970 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-01-05T05:22:28Z 2021-01-05T05:33:28Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>@@Joachim</p> <blockquote> <p>ja ich werde mich mal die Tage mit der Checkbox auseinandersetzen und auch mal gucken was es mit der Clipboard-API zu tun hat.</p> <p>Wir wohl doch anders als gedacht und ist definitiv schwieriger als vermutet.</p> </blockquote> <p>Das mit de<strong>m</strong> Clipboard-API kannst du ja genauso aus meinem Beispiel übernehmen.</p> <p>Nur die Zeilen 6–14 (das Zusammenbauen des Strings) werden bei dir anders sein: Da musst du halt deine Checkboxen, Radiobuttons(?) und Texteingabefeld auswerten.</p> <p>Nur dass bei dir weder der String noch das <code>output</code>-Element <code>workdays</code> heißen sollte.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“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.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779989#m1779989 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-01-05T10:55:25Z 2021-01-05T10:55:25Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>@@Gunnar Bittersmann</p> <blockquote> <p>Das mit de<strong>m</strong> Clipboard-API kannst du ja genauso aus meinem Beispiel übernehmen.</p> <p>Nur die Zeilen 6–14 (das Zusammenbauen des Strings) werden bei dir anders sein: Da musst du halt deine Checkboxen, Radiobuttons(?) und Texteingabefeld auswerten.</p> </blockquote> <p>Kann dann <a href="https://codepen.io/gunnarbittersmann/pen/NWRMvWj?editors=0010" rel="noopener noreferrer">so aussehen</a>:</p> <pre><code class="block language-js"> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> checkbox <span class="token keyword">of</span> form<span class="token punctuation">.</span>core<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>checkbox<span class="token punctuation">.</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span> awayTeam <span class="token operator">+=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>checkbox<span class="token punctuation">.</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\n</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Schleife über alle Checkboxen, die in meinem Beispiel alle <code>name="core"</code> tragen, also in <code>form.core</code> gesammelt sind. Für gesetzte Checkboxen wird deren Wert an den String angehängt.</p> <p>Noch den Wert des Freifeldes (sofern da was eingegeben wurde) dazu – fertig.</p> <blockquote> <p>Nur dass bei dir weder der String noch das <code>output</code>-Element <code>workdays</code> heißen sollte.</p> </blockquote> <p>… und auch nicht <code>awayTeam</code>.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“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.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/jan/02/in-textarea-strings-sammeln-dannach-in-die-zwischenablage-kopieren/1779998#m1779998 Rolf B 2021-01-05T11:58:54Z 2021-01-05T11:58:54Z in Textarea strings sammeln, dannach in die Zwischenablage kopieren <p>Hallo Gunnar,</p> <blockquote> <p>Disclaimer: This doesn’t work in Chromia (Chome, Edge, …)</p> </blockquote> <p>Der Browser, dessen Name nicht genannt werden darf ? Oder macht deine Tastatur auch Mätzchen bei gewissen Tasten? Bei mir war der Punkt defekt, bis ich die Kappe abgemacht und Produktionsmüll entsorgt habe.</p> <p>Abhilfe gegen einen Error schafft:</p> <pre><code class="block language-js"> <span class="token keyword">if</span> <span class="token punctuation">(</span>navigator<span class="token punctuation">.</span>clipboard <span class="token operator">&&</span> document<span class="token punctuation">.</span>featurePolicy<span class="token punctuation">.</span><span class="token function">allowsFeature</span><span class="token punctuation">(</span><span class="token string">"clipboard-write"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> </code></pre> <p>Dann greift zumindest der Fallback mit dem output-Element. Wobei ich gelesen habe, dass das auch nicht in jeder Chrome-Version funktioniert hat, aber im aktuellen Chrome 87 geht es.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div>