javascript - 复制按钮不适用于 HTML 模板

Question

我可以寻求帮助吗，我是 html 和 css 的新手，虽然我正在努力学习，但我几乎不知道这些东西，这是我到目前为止所做的，但我似乎无法修复复制按钮.. 有人可以帮助我吗请

我正在尝试创建一个模板，我很抱歉我真的很努力学习但我一无所知..

 <form id="tickettemplate" name="tickettemplate">
    <table width="700">
     <tbody>
      <tr>
        <td colspan="4" align="center">
          <div align="center">
            <p style="font-size: 14pt;" align="center">
              <strong>Shin's Template</strong>
            </p>
          </div>
        </td>
       </tr>
       </tbody>
      </table>
      <table style="font-size: 12pt; height: 164px;" width="697">
      <tbody>
      <tr>
        <td valign="middle">
          D/SESA
        </td>
        <td>
          <input id="callername_singleuser" name=
          "callername_singleuser" size="50" type="text" />
        </td>
      </tr>
      <tr>
        <td valign="middle">
          Caller’s name:
        </td>
        <td>
          <input id="Email" name="Email" size="50" type="text" />
        </td>
      </tr>
      <tr>
        <td valign="middle">
          Callback number:
        </td>
        <td>
          <input id="WinId_singleuser0" name="WinId_singleuser0"
          size="50" type="text" />
        </td>
      </tr>
      <tr>
        <td valign="top">
          E-mail address:
        </td>
        <td>
          <input id="ctystate0" name="E-mail Address" size="50"
          type="text" />
        </td>
      </tr>
      <tr>
        <td valign="middle">
          Related case#s (history):
        </td>
        <td>
          <input id="phonenumber_singleuser" name=
          "phonenumber_singleuser" size="50" type="text" />
        </td>
      </tr>
      <tr>
        <td valign="top">
          Location,remote/hotel/office:
        </td>
        <td>
          <input id="client1" name="client1" size="50" type=
          "text" />
        </td>
      </tr>
    </tbody>
  </table><br />
  <div>
    <br />
    <table style=
    "font-size: 12pt; border: 0px solid gray; height: 44px;" width=
    "758" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td valign="middle">
            Application name:&nbsp;
          </td>
          <td>
            <input id="WinId_singleuser0" name="WinId_singleuser0"
            size="50" type="text" />
          </td>
        </tr>
        <tr>
          <td valign="top">
            Number of Users Affected:
          </td>
          <td>
            <select id="Number of Users Affected:0" name=
            "Number of Users Affected:" size="1">
              <option value="Single User">
                Single User
              </option>
              <option value="Less than 5 users">
                Less than 5 users
              </option>
              <option value="5 or more users">
                5 or more users
              </option>
            </select>
          </td>
        </tr>
      </tbody>
    </table><br />
    <table style="font-size: 12pt; height: 255px;" width="604">
      <tbody>
        <tr>
          <td valign="middle">
            What is the problem:
          </td>
          <td>
            <p>
              <input id="callername_singleuser" name=
              "callername_singleuser" size="50" type="text" />
            </p>
          </td>
        </tr>
        <tr>
          <td valign="middle">
            When did the issue/problem begin:
          </td>
          <td>
            <input id="Email" name="Email" size="50" type="text" />
          </td>
        </tr>
        <tr>
          <td valign="middle">
            Logon id: :
          </td>
          <td>
            <input id="WinId_singleuser0" name="WinId_singleuser0"
            size="50" type="text" />
          </td>
        </tr>
        <tr>
          <td valign="top">
            Error message (if any):
          </td>
          <td>
            <input id="ctystate0" name="Error message (if any):"
            size="50" type="text" />
          </td>
        </tr>
        <tr>
          <td valign="middle">
            When was the last time it worked properly:
          </td>
          <td>
            <input id="phonenumber_singleuser" name=
            "phonenumber_singleuser" size="50" type="text" />
          </td>
        </tr>
        <tr>
          <td valign="top">
            Have there been any changes to your PC since the last
            time it worked properly:
          </td>
          <td>
            <input id="client1" name="client1" size="50" type=
            "text" />
          </td>
        </tr>
        <tr>
          <td valign="middle">
            Have you changed your password recently:
          </td>
          <td>
            <input id="callername_singleuser" name=
            "callername_singleuser" size="50" type="text" />
          </td>
        </tr>
      </tbody>
    </table><br />
    <table style="font-size: 12pt;">
      <tbody>
        <tr>
          <td valign="middle">
            Trouble shooting steps (Detailed): 
            <textarea cols="50" rows="2">
</textarea>
          </td>
        </tr>
        <tr>
          <td valign="middle">
            Additional Detail (links, screenshots etc...): 
            <textarea cols="50" rows="2">
</textarea>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <br />
      <table style=
      "font-size: 12pt; border: 1px solid gray; height: 92px;"
      width="612" cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <td valign="top">
              Problem:
            </td>
            <td>
              <input id="client1" name="client1" size="50" type=
              "text" />
            </td>
          </tr>
          <tr>
            <td valign="top">
              Cause:
            </td>
            <td>
              <input id="client1" name="client1" size="50" type=
              "text" />
            </td>
          </tr>
          <tr>
            <td valign="top">
              Action:
            </td>
            <td>
              <input id="client1" name="client1" size="50" type=
              "text" />
            </td>
          </tr>
          <tr>
            <td valign="top">
              Resolution:
            </td>
            <td>
              <input id="client1" name="client1" size="50" type=
              "text" />
            </td>
          </tr>
          <tr>
            <td align="right" width="150">
              <input name="Reset" type="reset" value=
              "Clear Template" />
            </td>
            <td align="right" width="450">
              <input name="copyform" type="button" value=
              "Copy" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</form>

Answer 1

这是一个使用几行 JS 的解决方案。

HTML

    <p id="p1">Text</p>
    <button onclick="copyToClipboard('#p1')">Copy TEXT</button>

JS

    function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
    }