Ich möchte gerne das wenn ich in der rechten Spalte auf copy gehe, das links davon im Feld das in der Zwischenablage kopiert wird

  • JavaScript

Es gibt 18 Antworten in diesem Thema. Der letzte Beitrag () ist von Snipy26.

    Ich möchte gerne das wenn ich in der rechten Spalte auf copy gehe, das links davon im Feld das in der Zwischenablage kopiert wird

    Hallo @ All

    kann man hier auch Anfragen stellen für html Codierung? Bin dabei eine private Seite für die Arbeit zu machen, wo ich verschiedene Themen habe.
    Und die besteht aus einer Tabelle mit 3 Spalten und 5 Zeilen. Ich mache hier mal ein Beispiel

    subject Hoch
    prio. Normal
    anliegen. Frage. Copy
    lösung. Lösung. Copy
    intern. Intern. Copy

    zurück


    so im groben schaut es aus. Ich möchte gerne das wenn ich in der rechten Spalte auf copy gehe, das links davon im Feld das in der Zwischenablage kopiert wird, damit ich es in einem anderen program einfügen kann. Beim normalen kopieren passiert es mir leider sehr oft, das ich zusätzlich zwei leerspalten im Text habe. Und bei langen Texten ist das doof.

    Liebe Grüße

    *Titel und Label angepasst*
    Grüße Snipy26



    Auf jeder Aktion erfolgt immer eine Re-Aktion, und selbst wenn es nur ne Fehlermeldung ist. :thumbsup:

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Marcus Gräfe“ ()

    Mit HTML geht sowas nicht, nur mit Javascript.

    Zeig mal deinen HTML-Code, dann kann man das JS dazu basteln. Oder du machst es selbst, hier ein Beispiel: w3schools.com/howto/howto_js_copy_clipboard.asp
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Der link ist gut. Bin schon mal ein Ende weiter. Muss nur noch das mit Input lösen. Weil aktuell macht er grad ein extra Kästchen rein. ‍♂️
    Grüße Snipy26



    Auf jeder Aktion erfolgt immer eine Re-Aktion, und selbst wenn es nur ne Fehlermeldung ist. :thumbsup:

    Hier mal der Code:

    Problem ist, wenn ich den Button oben oder unten klicke, kopiert er nur das unten.

    er soll aber das links davon kopieren. als beispiel: was willst du
    das kästchen soll aber nicht da sein


    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta http-equiv="content-type" content="text/html; charset=windows-1252"/>
    5. <title></title>
    6. <meta name="generator" content="LibreOffice 6.1.4.2 (Windows)"/>
    7. <meta name="created" content="00:00:00"/>
    8. <meta name="changed" content="2019-02-09T21:10:29.539000000"/>
    9. <link href="style.css" rel="stylesheet" />
    10. <style type="text/css">
    11. @page { margin: 2cm }
    12. p.normal { margin-bottom: 0cm; color: #000000; font-family: "Times New Roman"; font-size: 10pt; font-weight: normal }
    13. a:link { color: #0000ff }
    14. a:visited { color: #800080 }
    15. </style>
    16. </head>
    17. <body lang="de-DE" vlink="#800080" dir="ltr"><p class="normal" style="margin-bottom: 0.5cm">
    18. <font color="#f10d0c"><span style="text-decoration: none"><font face="Comic Sans MS"><font size="4" style="font-size: 14pt">#
    19. </font></font></span></font><font color="#f10d0c"><span style="text-decoration: none"><font face="Comic Sans MS"><font size="4" style="font-size: 14pt">Test
    20. Blanko Tabelle</font></font></span></font></p>
    21. <p class="normal" style="margin-bottom: 0.5cm"><br/>
    22. <br/>
    24. </p>
    25. <table width="888" cellpadding="4" cellspacing="1" style="page-break-inside: avoid">
    26. <col width="281"/>
    28. <col width="505"/>
    30. <col width="72"/>
    32. <tr valign="top">
    33. <td width="281" style="border-top: 1px double #808080; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0.1cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p class="normal" align="left">
    34. <font face="Arial"><font size="3" style="font-size: 12pt"><font color =#01DF3A>Subject:</font></font></font></p>
    35. </td>
    36. <td width="505" style="border-top: 1px double #808080; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0.1cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p>
    37. <br/>
    39. </p>
    40. </td>
    41. <td width="72" style="border: 1px double #808080; padding: 0.1cm"><p align="center">
    42. <br/>
    44. </p>
    45. </td>
    46. </tr>
    47. <tr valign="top">
    48. <td width="281" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p class="normal" align="left">
    49. <font face="Arial"><font size="3" style="font-size: 12pt"><font color =#01DF3A>Prio:</font></font></font></p>
    50. </td>
    51. <td width="505" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p>
    52. <br/>
    54. </p>
    55. </td>
    56. <td width="72" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: 1px double #808080; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm"><p align="center">
    57. <br/>
    59. </p>
    60. </td>
    61. </tr>
    62. <tr valign="top">
    63. <td width="281" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p class="normal" align="left">
    64. <font face="Arial"><font size="3" style="font-size: 12pt"><font color =#01DF3A>Anliegen:</font></font></font></p>
    65. </td>
    66. <td width="505" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p>
    67. <br/>
    69. <input type="text" value="Oben" id="myInput1">
    71. <font face="Arial, sans-serif"><font size="3" style="font-size: 12pt">-
    72. was willst du</font></font>
    73. </p>
    74. </td>
    75. <td width="72" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: 1px double #808080; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm"><p class="normal" align="center">
    78. <button onclick="myFunction()">oben</button>
    80. <script>
    81. function myFunction() {
    82. // Get the text field
    83. var copyText = document.getElementById("myInput1");
    85. // Select the text field
    86. copyText.select();
    87. copyText.setSelectionRange(0, 99999); // For mobile devices
    89. // Copy the text inside the text field
    90. navigator.clipboard.writeText(copyText.value);
    92. // Alert the copied text
    93. alert("Copied the text: " + copyText.value);
    94. }
    95. </script>
    96. </p>
    99. </td>
    100. </tr>
    101. <tr valign="top">
    102. <td width="281" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p class="normal" align="left">
    103. <font face="Arial"><font size="3" style="font-size: 12pt"><font color =#01DF3A>L&ouml;sung:</font></font></font></p>
    104. </td>
    105. <td width="505" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p>
    106. <br/>
    108. <input type="text" value="mitte" id="btncopytext">
    109. <id="btncopytext">
    111. <font face="Arial, sans-serif"><font size="3" style="font-size: 12pt">-
    112. da hast du
    113. </font></font>
    114. </p>
    115. </td>
    116. <td width="72" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: 1px double #808080; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm"><p class="normal" align="center">
    119. <button onclick="myFunction()">mitte</button>
    120. <script>
    121. function myFunction() {
    122. // Get the text field
    123. var copyText = document.getElementById("btncopytext");
    125. // Select the text field
    126. copyText.select();
    127. copyText.setSelectionRange(0, 99999); // For mobile devices
    129. // Copy the text inside the text field
    130. navigator.clipboard.writeText(copyText.value);
    132. // Alert the copied text
    133. alert("Copied the text: " + copyText.value);
    134. }
    135. </script>
    139. </p>
    140. </td>
    141. </tr>
    142. <tr valign="top">
    143. <td width="281" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p class="normal" align="left">
    144. <font face="Arial"><font size="3" style="font-size: 12pt"><font color =#01DF3A>Interner
    145. Vermerk:</font></font></font></p>
    146. </td>
    148. <td width="505" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p>
    149. <br/>
    151. <input type="text" value="Unten" id="myInput3">
    153. <font face="Arial, sans-serif"><font size="3" style="font-size: 12pt">- bekommt nix</font></font>
    155. </p>
    156. </td>
    157. <td width="72" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: 1px double #808080; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm"><p class="normal" align="center">
    159. <button onclick="myFunction()">unten</button>
    161. <script>
    162. function myFunction() {
    163. // Get the text field
    164. var copyText = document.getElementById("myInput3");
    166. // Select the text field
    167. copyText.select();
    168. copyText.setSelectionRange(0, 99999); // For mobile devices
    170. // Copy the text inside the text field
    171. navigator.clipboard.writeText(copyText.value);
    173. // Alert the copied text
    174. alert("Copied the text: " + copyText.value);
    175. }
    176. </script>
    179. </p>
    180. </td>
    181. </tr>
    182. </table>
    183. <p class="normal" style="margin-bottom: 0.5cm">&nbsp;</p>
    184. <p class="normal" style="margin-bottom: 0.5cm"><a href="Textbausteine1.htm"><button>Zur&uuml;ck</button></a></p>
    185. </body>
    186. </html>
    Grüße Snipy26



    Auf jeder Aktion erfolgt immer eine Re-Aktion, und selbst wenn es nur ne Fehlermeldung ist. :thumbsup:

    Du kannst nicht 3 gleichnamige Funktionen haben, und Overloading gibt's in JavaScript afaik auch nicht (kein natives jedenfalls, es existieren aber workarounds).

    Bau dir einen Event Listener für OnClick, foreache alle Elemente die eine bestimmte Klasse haben (zB "copyme") und schreib dort dann den Code rein, also in etwa das was in deiner myFunction() steht. Wenn das Kopieren von einem anderen Element aus erfolgen soll (so verstehe ich deine Anforderung) kannst du das auch machen, am besten indem du im Element über ein data Attribut einen Selektor für das Zielelement hinterlegst.

    Siehe daily-dev-tips.com/posts/vanil…ner-on-multiple-elements/


    Link
    Hello World

    Natürlich wäre es besser und ordentlicher, das so zu machen, wie von @Link vorgeschlagen, aber die einfachste Möglichkeit, um den vorhandenen Code nur minimal anpassen zu müssen, wäre folgendes:

    Ersetze

    HTML-Quellcode

    1. <button onclick="myFunction()">oben</button>

    durch

    HTML-Quellcode

    1. <button onclick="myFunction('myInput1')">oben</button>

    (natürlich musst du 3 verschiedene Aufrufe machen, nicht immer mit myInput1)

    JavaScript-Quellcode

    1. function myFunction() {

    durch

    JavaScript-Quellcode

    1. function myFunction(id) {


    und

    JavaScript-Quellcode

    1. var copyText = document.getElementById("myInput1");

    durch

    JavaScript-Quellcode

    1. var copyText = document.getElementById(id);

    Ungetestet!
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Hab es mal gemacht, ohne erfolg. er kopiert den garnichts mehr

    hier mal der neue code

    HTML-Quellcode

    1. <tr valign="top">
    2. <td width="281" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p class="normal" align="left">
    3. <font face="Arial"><font size="3" style="font-size: 12pt"><font color =#01DF3A>Anliegen:</font></font></font></p>
    4. </td>
    5. <td width="505" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p>
    6. <br/>
    8. <input type="text" value="Oben" id="myInput1">
    10. <font face="Arial, sans-serif"><font size="3" style="font-size: 12pt">-
    11. was willst du</font></font>
    12. </p>
    13. </td>
    14. <td width="75" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: 1px double #808080; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm"><p class="normal" align="center">
    16. <button onclick="myFunction("myInput1")" button class="btn danger">Oben</button>
    18. <script>
    19. function myFunction(id) {
    20. // Get the text field
    21. var copyText = document.getElementById(id);
    23. // Select the text field
    24. copyText.select();
    25. copyText.setSelectionRange(0, 99999); // For mobile devices
    27. // Copy the text inside the text field
    28. navigator.clipboard.writeText(copyText.value);
    30. // Alert the copied text
    31. alert("Anliegen ist kopiert. : " + copyText.value);
    32. }
    33. </script>
    34. </p>
    36. </td>
    37. </tr>


    beim alten code ging es halbwegs.

    ziel ist, das das was link von oben steht, in der mittleren spalte auf der gleichen zeile es in zwischnspeicher koppiert. was im bild schwarzer text ist. das kästchen davor soll nicht sein. irgendwie muss ich von spalte 3 eine verlinkung zu spalte 2 schaffen. zumindest so mein gedanke.

    sry falls ich mich doof ausgedrückt habe.
    Bilder

    • Test blanko.JPG

      83,67 kB, 961×592, 60 mal angesehen
    Grüße Snipy26



    Auf jeder Aktion erfolgt immer eine Re-Aktion, und selbst wenn es nur ne Fehlermeldung ist. :thumbsup:

    Statt "myFunction("myInput1")" musst du "myFunction('myInput1')" machen. Es ist doch klar, dass du dieselben Anführungszeichen nicht ohne Maskierung verwenden kannst, ist doch in jeder Programmiersprache so.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Hab ich gemacht. aber denn kopiert er nur die letzte zeile.

    siehe bild
    Bilder

    • test blanko 2.JPG

      58,97 kB, 946×596, 60 mal angesehen
    Grüße Snipy26



    Auf jeder Aktion erfolgt immer eine Re-Aktion, und selbst wenn es nur ne Fehlermeldung ist. :thumbsup:

    Ich weiß nicht ob ich dein Problem verstanden habe. Du willst also, dass wenn man "oben" drückt, der Text aus der Textbox links daneben kopiert wird, wenn man "mitte" drückt, der Text aus der Textbox daneben kopiert wird
    und wenn man "unten" drückt, der Text aus der Textbox daneben kopiert wird?

    Gut, dann mach es so:

    Spoiler anzeigen
    ​

    HTML-Quellcode

    1. ​<!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta http-equiv="content-type" content="text/html; charset=windows-1252"/>
    5. <title></title>
    6. <meta name="generator" content="LibreOffice 6.1.4.2 (Windows)"/>
    7. <meta name="created" content="00:00:00"/>
    8. <meta name="changed" content="2019-02-09T21:10:29.539000000"/>
    9. <link href="style.css" rel="stylesheet" />
    10. <style type="text/css">
    11. @page { margin: 2cm }
    12. p.normal { margin-bottom: 0cm; color: #000000; font-family: "Times New Roman"; font-size: 10pt; font-weight: normal }
    13. a:link { color: #0000ff }
    14. a:visited { color: #800080 }
    15. </style>
    16. </head>
    17. <body lang="de-DE" vlink="#800080" dir="ltr"><p class="normal" style="margin-bottom: 0.5cm">
    18. <font color="#f10d0c"><span style="text-decoration: none"><font face="Comic Sans MS"><font size="4" style="font-size: 14pt">#
    19. </font></font></span></font><font color="#f10d0c"><span style="text-decoration: none"><font face="Comic Sans MS"><font size="4" style="font-size: 14pt">Test
    20. Blanko Tabelle</font></font></span></font></p>
    21. <p class="normal" style="margin-bottom: 0.5cm"><br/>
    22. <br/>
    23. </p>
    24. <table width="888" cellpadding="4" cellspacing="1" style="page-break-inside: avoid">
    25. <col width="281"/>
    26. <col width="505"/>
    27. <col width="72"/>
    28. <tr valign="top">
    29. <td width="281" style="border-top: 1px double #808080; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0.1cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p class="normal" align="left">
    30. <font face="Arial"><font size="3" style="font-size: 12pt"><font color =#01DF3A>Subject:</font></font></font></p>
    31. </td>
    32. <td width="505" style="border-top: 1px double #808080; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0.1cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p>
    33. <br/>
    34. </p>
    35. </td>
    36. <td width="72" style="border: 1px double #808080; padding: 0.1cm"><p align="center">
    37. <br/>
    38. </p>
    39. </td>
    40. </tr>
    41. <tr valign="top">
    42. <td width="281" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p class="normal" align="left">
    43. <font face="Arial"><font size="3" style="font-size: 12pt"><font color =#01DF3A>Prio:</font></font></font></p>
    44. </td>
    45. <td width="505" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p>
    46. <br/>
    47. </p>
    48. </td>
    49. <td width="72" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: 1px double #808080; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm"><p align="center">
    50. <br/>
    51. </p>
    52. </td>
    53. </tr>
    54. <tr valign="top">
    55. <td width="281" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p class="normal" align="left">
    56. <font face="Arial"><font size="3" style="font-size: 12pt"><font color =#01DF3A>Anliegen:</font></font></font></p>
    57. </td>
    58. <td width="505" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p>
    59. <br/>
    61. <input type="text" value="Oben" id="myInput1">
    63. <font face="Arial, sans-serif"><font size="3" style="font-size: 12pt">-
    64. was willst du</font></font>
    65. </p>
    66. </td>
    67. <td width="72" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: 1px double #808080; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm"><p class="normal" align="center">
    70. <button onclick="myFunction('myInput1')">oben</button>
    71. <script>
    72. function myFunction(id) {
    73. // Get the text field
    74. var copyText = document.getElementById(id);
    75. // Select the text field
    76. copyText.select();
    77. copyText.setSelectionRange(0, 99999); // For mobile devices
    78. // Copy the text inside the text field
    79. navigator.clipboard.writeText(copyText.value);
    81. // Alert the copied text
    82. alert("Copied the text: " + copyText.value);
    83. }
    84. </script>
    85. </p>
    88. </td>
    89. </tr>
    90. <tr valign="top">
    91. <td width="281" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p class="normal" align="left">
    92. <font face="Arial"><font size="3" style="font-size: 12pt"><font color =#01DF3A>L&ouml;sung:</font></font></font></p>
    93. </td>
    94. <td width="505" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p>
    95. <br/>
    97. <input type="text" value="mitte" id="btncopytext">
    98. <id="btncopytext">
    100. <font face="Arial, sans-serif"><font size="3" style="font-size: 12pt">-
    101. da hast du
    102. </font></font>
    103. </p>
    104. </td>
    105. <td width="72" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: 1px double #808080; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm"><p class="normal" align="center">
    108. <button onclick="myFunction('btncopytext')">mitte</button>
    112. </p>
    113. </td>
    114. </tr>
    115. <tr valign="top">
    116. <td width="281" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p class="normal" align="left">
    117. <font face="Arial"><font size="3" style="font-size: 12pt"><font color =#01DF3A>Interner
    118. Vermerk:</font></font></font></p>
    119. </td>
    121. <td width="505" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p>
    122. <br/>
    124. <input type="text" value="Unten" id="myInput3">
    126. <font face="Arial, sans-serif"><font size="3" style="font-size: 12pt">- bekommt nix</font></font>
    127. </p>
    128. </td>
    129. <td width="72" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: 1px double #808080; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm"><p class="normal" align="center">
    131. <button onclick="myFunction('myInput3')">unten</button>
    135. </p>
    136. </td>
    137. </tr>
    138. </table>
    139. <p class="normal" style="margin-bottom: 0.5cm">&nbsp;</p>
    140. <p class="normal" style="margin-bottom: 0.5cm"><a href="Textbausteine1.htm"><button>Zur&uuml;ck</button></a></p>
    141. </body>
    142. </html>



    Du brauchst nicht für jeden Button eine Funktion.
    Hier hab ich jetzt wie auch Marcus versucht hat es zu erklären, der Funktion einen Parameter gegeben, welcher die ID der Textbox sein muss, welche kopiert wird.
    Aber fernab von der Javascript-Seite solltest du dringend dein CSS auslagern, das ist viel zu unübersichtlich was du da hast.


    Meine Website:
    www.renebischof.de

    Meine erste App (Android):
    PartyPalooza

    du hast mich richtig verstanden.

    fast so wollte ich es haben, nur noch das er das schwarze kopiert. das weiße textfeld soll nicht sein. aber so hab ich jetzt ein ansatz, wie ich es weiter machen kann.

    Und eine frage noch dazu, bei alert meldung, kann man das so mahen, das wenn mitte geklickt wird auch im text mitte steht und bei unten halt unten?

    Danke dir schonmal
    Grüße Snipy26



    Auf jeder Aktion erfolgt immer eine Re-Aktion, und selbst wenn es nur ne Fehlermeldung ist. :thumbsup:

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Snipy26“ ()

    genau. ich habe insgesamt 32 verschiedene dateien in html, die ich immer wieder benötige. und als beispiel schaut das so aus:

    zumindest soll es so werden. von der optik und aufbau her

    und die schrift hat folgenden code:

    HTML-Quellcode

    1. <font face="Arial, sans-serif"><font size="3" style="font-size: 12pt"><font color =#D8D8D8>-
    2. kd &uuml;ber inso sperre informiert<br/>
    3. - kd informiert, das
    4. sachverhalt weiter geleitet und gepr&uuml;ft wird<br/>
    5. -
    6. bearbeitungsdauer -&gt; 2-3 werktage<br/>
    7. - kd wird kontaktiert </font></font></font>


    und halt bei oden soll anliegen kopiert werden, damit ich es im daten program einfogen kann.
    bei lösung und intern das gleiche. und das daten programm hat 3 text felder mit dieser bezeichnung anliegen, löung und intern.

    und in bild 2 muss ich das halt mit strg + v einfügen. und bei texte die teilweise 20 zeilen lang sind ist das schon ne erleichterung damit. :)
    Bilder

    • beispiel 1.JPG

      112,51 kB, 751×504, 61 mal angesehen

    • beispiel 2.JPG

      39,61 kB, 710×599, 48 mal angesehen
    Grüße Snipy26



    Auf jeder Aktion erfolgt immer eine Re-Aktion, und selbst wenn es nur ne Fehlermeldung ist. :thumbsup:

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Snipy26“ ()

    Ich habe deinen HTML-Code jetzt einfach übernommen und die Änderungen vorgenommen. Der Code ist aber wirklich schrecklich, um das nett zu sagen :D
    Du musst wirklich von Inline-CSS wegkommen und deine HTML-Struktur richtig formatieren.

    So siehts nun aus:



    Wenn man auf die Buttons drückt, wird der Text links daneben jeweils kopiert.
    Ich habe einfach ein P-Element erstellt und dem eine ID zugewiesen. Dann habe ich in der Javascript-Funktion den innerText des übergebenen Elements ausgelesen:

    Quellcode

    1. var copyText = document.getElementById(id).innerText;


    Dann wolltest du, dass in der Alert-Meldung noch der jeweilige Button-Text steht. Das kann man auf viele Wege machen, ich habe einen ganz simplen genommen.
    Die Javascript-Funktion hat nun 2 Parameter. Der erste ist das auszulesene Element, der zweite Parameter ist nun das, was noch in der Alert-Meldung stehen soll.

    Beispiel:

    Quellcode

    1. <button onclick="myFunction('idLoesung', 'Mitte')">mitte</button>




    Ganzer Code:

    Spoiler anzeigen

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta http-equiv="content-type" content="text/html; charset=windows-1252"/>
    5. <title></title>
    6. <meta name="generator" content="LibreOffice 6.1.4.2 (Windows)"/>
    7. <meta name="created" content="00:00:00"/>
    8. <meta name="changed" content="2019-02-09T21:10:29.539000000"/>
    9. <link href="style.css" rel="stylesheet" />
    10. <style type="text/css">
    11. @page { margin: 2cm }
    12. p.normal { margin-bottom: 0cm; color: #000000; font-family: "Times New Roman"; font-size: 10pt; font-weight: normal }
    13. a:link { color: #0000ff }
    14. a:visited { color: #800080 }
    15. </style>
    16. </head>
    17. <body lang="de-DE" vlink="#800080" dir="ltr"><p class="normal" style="margin-bottom: 0.5cm">
    18. <font color="#f10d0c"><span style="text-decoration: none"><font face="Comic Sans MS"><font size="4" style="font-size: 14pt">#
    19. </font></font></span></font><font color="#f10d0c"><span style="text-decoration: none"><font face="Comic Sans MS"><font size="4" style="font-size: 14pt">Test
    20. Blanko Tabelle</font></font></span></font></p>
    21. <p class="normal" style="margin-bottom: 0.5cm"><br/>
    22. <br/>
    23. </p>
    24. <table width="888" cellpadding="4" cellspacing="1" style="page-break-inside: avoid">
    25. <col width="281"/>
    26. <col width="505"/>
    27. <col width="72"/>
    28. <tr valign="top">
    29. <td width="281" style="border-top: 1px double #808080; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0.1cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p class="normal" align="left">
    30. <font face="Arial"><font size="3" style="font-size: 12pt"><font color =#01DF3A>Subject:</font></font></font></p>
    31. </td>
    32. <td width="505" style="border-top: 1px double #808080; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0.1cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p>
    33. <br/>
    34. </p>
    35. </td>
    36. <td width="72" style="border: 1px double #808080; padding: 0.1cm"><p align="center">
    37. <br/>
    38. </p>
    39. </td>
    40. </tr>
    41. <tr valign="top">
    42. <td width="281" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p class="normal" align="left">
    43. <font face="Arial"><font size="3" style="font-size: 12pt"><font color =#01DF3A>Prio:</font></font></font></p>
    44. </td>
    45. <td width="505" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p>
    46. <br/>
    47. </p>
    48. </td>
    49. <td width="72" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: 1px double #808080; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm"><p align="center">
    50. <br/>
    51. </p>
    52. </td>
    53. </tr>
    54. <tr valign="top">
    55. <td width="281" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p class="normal" align="left">
    56. <font face="Arial"><font size="3" style="font-size: 12pt"><font color =#01DF3A>Anliegen:</font></font></font></p>
    58. </td>
    59. <td width="505" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p>
    62. <p style="font-family:Arial, sans-serif font-size: 12pt" id="idAnliegen">was willst du</p>
    64. </p>
    65. </td>
    66. <td width="72" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: 1px double #808080; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm"><p class="normal" align="center">
    69. <button onclick="myFunction('idAnliegen','Oben')">oben</button>
    70. <script>
    71. function myFunction(id, sender) {
    72. // Get the text field
    73. var copyText = document.getElementById(id).innerText;
    75. // Copy the text inside the text field
    76. navigator.clipboard.writeText(copyText);
    78. // Alert the copied text
    79. alert(sender + ": " + copyText);
    80. }
    81. </script>
    82. </p>
    85. </td>
    86. </tr>
    87. <tr valign="top">
    88. <td width="281" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p class="normal" align="left">
    89. <font face="Arial"><font size="3" style="font-size: 12pt"><font color =#01DF3A>L&ouml;sung:</font></font></font></p>
    90. </td>
    91. <td width="505" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p>
    95. <p style="font-family:Arial, sans-serif font-size: 12pt" id="idLoesung">Das hast du</p>
    96. </p>
    97. </td>
    98. <td width="72" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: 1px double #808080; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm"><p class="normal" align="center">
    101. <button onclick="myFunction('idLoesung', 'Mitte')">mitte</button>
    105. </p>
    106. </td>
    107. </tr>
    108. <tr valign="top">
    109. <td width="281" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p class="normal" align="left">
    110. <font face="Arial"><font size="3" style="font-size: 12pt"><font color =#01DF3A>Interner
    111. Vermerk:</font></font></font></p>
    112. </td>
    114. <td width="505" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: none; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0cm"><p>
    117. <p style="font-family:Arial, sans-serif font-size: 12pt" id="idVermerk">Bekommt nix</p>
    118. </p>
    119. </td>
    120. <td width="72" style="border-top: none; border-bottom: 1px double #808080; border-left: 1px double #808080; border-right: 1px double #808080; padding-top: 0cm; padding-bottom: 0.1cm; padding-left: 0.1cm; padding-right: 0.1cm"><p class="normal" align="center">
    122. <button onclick="myFunction('idVermerk','Unten')">unten</button>
    126. </p>
    127. </td>
    128. </tr>
    129. </table>
    130. <p class="normal" style="margin-bottom: 0.5cm">&nbsp;</p>
    131. <p class="normal" style="margin-bottom: 0.5cm"><a href="Textbausteine1.htm"><button>Zur&uuml;ck</button></a></p>
    132. </body>
    133. </html>



    Meine Website:
    www.renebischof.de

    Meine erste App (Android):
    PartyPalooza

    genau so willte ich das haben.

    kann ich den button auch wieder den effekt geben

    ccs datei:

    HTML-Quellcode

    1. H1
    2. {
    3. font-family: comic sans MS;
    4. }
    5. p
    6. {
    7. font-family: trebuchet MS;
    8. font-size: 18px;
    9. }
    10. body
    11. {
    12. background-image:url(backround1.jpg);
    13. background-position: 50% 50%;
    14. background-repeat: no-repeat;
    15. background-attachment: fixed;
    16. -webkit-background-size: cover;
    17. -moz-background-size: cover;
    18. -o-background-size: cover;
    19. background-size: cover;
    20. background-color: #000;
    21. background-repeat:no-repeat;
    22. background-position: 0px 0px;
    24. }
    26. /* Back */
    27. Button.back {
    28. font-family: comic sans MS;
    29. font-size: 18px;
    30. transition-duration: 1000ms;
    31. background: linear-gradient(to right bottom, silver,silver,white,silver,silver);
    32. border-width: 2px;
    33. border-radius: 20px 0;
    34. box-shadow: 0 0 0 rgba(0,0,0,.8);
    35. }
    37. .back:hover {
    38. font-size: 25px;
    39. transition-duration: 1000ms;
    40. cursor: pointer;
    41. border-radius: 0 20px;
    42. box-shadow: 5px 5px 1px rgba(0,0,0,.2);
    43. }
    45. /* Blue */
    46. Button.danger {
    47. border-radius: 5px;
    48. border-color: #2196F3;
    49. color: dodgerblue;
    50. }
    52. .danger:hover {
    53. border-radius: 5px;
    54. background: #2196F3;
    55. color: white;
    56. }
    58. {
    59. <h1>Outline Buttons</h1>
    61. <button class="btn back">Zurück</button>
    62. <button class="btn danger">Kopieren</button>
    63. }
    64. H2
    65. {
    66. font-family: comic sans MS;
    67. }


    beim zurück button geht es ja mit anpassen. nur bei den kopieren button kommt, wenn ich es ändere mit button class denn zu undefinied
    Grüße Snipy26



    Auf jeder Aktion erfolgt immer eine Re-Aktion, und selbst wenn es nur ne Fehlermeldung ist. :thumbsup:

    Meinst du, dass der Button sich so komisch verschiebt, wenn man mit der Maus drüberfährt?

    Wenn du das möchtest musst du den Buttons die Class "back" (In deinem CSS deklariert) zuweisen:


    HTML-Quellcode

    1. <button class="back" onclick="myFunction('idVermerk','Unten')">unten</button>


    oder

    HTML-Quellcode

    1. <button class="back" onclick="myFunction('idLoesung', 'Mitte')">mitte</button>


    Du weißt was ich meine.
    Dann sieht es so aus:



    Aber nur, weil CSS einem die Möglichkeiten gibt, sollte man nicht alles davon nutzen. Solch ein UI-Design ist nicht immer sinnig, aber das musst du entscheiden.
    Wenn es nur für dich ist und du es schön findest, dann kannst du dich ja austoben.

    Du weißt jetzt auf jeden Fall ja wie.
    Grüße


    Meine Website:
    www.renebischof.de

    Meine erste App (Android):
    PartyPalooza

    nee, das er blau ist. den button mit

    HTML-Quellcode

    1. <button class="btn danger">Kopieren</button>

    der mit verschieben ist ja nur für zurück. und der funzt schon.

    Edit: funzt alles. perfekt. ich danke euch.

    so, jetzt das ganze noch bei 32 dateien anpassen =O
    Grüße Snipy26



    Auf jeder Aktion erfolgt immer eine Re-Aktion, und selbst wenn es nur ne Fehlermeldung ist. :thumbsup:

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Snipy26“ ()

    So, mal ein Update. Eine Datei erfolgreich angepassteren funktioniert wie gewünscht. Hab den Code auch nochmal bei der Anordnung der Tabelle angepasst und gekürzt.

    es ist so wie ich es mir vorgestellt habe.

    Vielen Dank euch nochmal für die Hilfe. ☺️
    Grüße Snipy26



    Auf jeder Aktion erfolgt immer eine Re-Aktion, und selbst wenn es nur ne Fehlermeldung ist. :thumbsup: