Question

请帮助我......我只想使用jquery或javascript创建一个复制按钮，该按钮将复制白框上的所有签名。

如果我点击了复制签名..白色方框上的整个签名（signature_gen）将复制，如果我使用ctrl + v，它将粘贴在outlook上。

这是我的HTML代码：

<div id="signature_gen" class="signature_gen">
  <table width="482" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="129" rowspan="3" align="center" valign="middle"><img src="images/logo.png" alt="" width="114" height="114" /></td>
      <td width="2" rowspan="3" bgcolor="#999999"></td>
      <td colspan="8" align="left" valign="top"></td>
    </tr>
    <tr>
      <td height="76" colspan="8" align="left" valign="top">
        <table width="340" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="10"></td>
            <td width="269">
            <div>
              <b><?php echo $fname; ?></b>
              <br />
              <?php echo $position; ?>
              <br />
              WeChat: <?php echo $wechatid; ?> | Skype: <?php echo $skypeid; ?> 
              <br />
              Mobile No.: +<?php echo $mobileid; ?> <?php echo $mobileid2; ?> <?php echo $mobileid3; ?> 
            </div>
            </td>
            <td width="10"></td>
          </tr>
          <tr>
          <td height="10" colspan="10"></td>
        </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td width="18"></td>
      <td width="29"><a href="https://www.facebook.com/51talk/"><img src="images/fb.png" width="29" height="29" /></a></td>
      <td width="6"></td>
      <td width="29"><a href="https://www.linkedin.com/company-beta/3017837/"><img src="images/in.png" width="29" height="29" /></a></td>
      <td width="6"></td>
      <td width="29"><a href="https://twitter.com/51TalkPH"><img src="images/tw.png" width="29" height="29" /></a></td>
      <td width="6"></td>
      <td width="198"><a href="https://www.instagram.com/51talkph/"><img src="images/insta.png" width="30" height="30" /></a></td>
    </tr>
    <tr>
      <td colspan="10" align="center" valign="middle"><p class="footer"><div2><em>51Talk,an NYSE listed company, is a leading  online English teaching platform in the world.</em></div2></p></td>
    </tr>
  </table>
</div>
<div class="btn-section">
    <input type="submit" name="submit" class="btn-copy" value="Copy Signature" />
</div>

和我的js代码：

<script type="text/javascript">
function copyToClipboard(elementId) {


  var aux = document.createElement("input");
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);
  document.body.appendChild(aux);
  aux.select();
  document.execCommand("copy");

  document.body.removeChild(aux);

}
</script>

但是当我尝试粘贴代码时，它会像这样：

我想这样做：

希望你能帮助我......

Answer 1

$(document).ready(function () {
        $("#SignatureHtml").attr('data-clipboard-text', $("#Box").html());

        var clipboard = new Clipboard('.Btn');

        clipboard.on('success', function (e) {
            $("#Box").css("border-color", "blue");
            $("#PastSection").focus();

        });


    });

.element {
        float: left;
    }

    #Box {
        width: 200px;
        height: 85px;
        border: 1px solid #ccc;
        text-align: center;
        padding: 5px;
        margin: 0px 5px 5px 5px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- download plugin url : https://clipboardjs.com-->
    <!--best solution-->
    <script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
    <div style="display: inline-block;">
        <div class="element" id="Box">
            <span>Test Text1</span>
            <br>
            <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="100" />
            <br>
            <b>Test Text2</b>
        </div>
        <div class="element">

            <textarea rows="6" cols="40" id="PastSection" placeholder="Ctrl+V"></textarea>
        </div>

    </div>
    <div>
        <button id="SignatureHtml" class="Btn" type="button" data-clipboard-text="">copy</button>
    </div>

Answer 2

我建议将ID添加到：

<div id="message">
    <b><?php echo $fname; ?></b>
    <br />
    <?php echo $position; ?>
    <br />
    WeChat: <?php echo $wechatid; ?> | Skype: <?php echo $skypeid; ?> 
    <br />
    Mobile No.: +<?php echo $mobileid; ?> <?php echo $mobileid2; ?> 
    <?php echo $mobileid3; ?> 
</div>

您需要使用jQuery / Javascript选择文本，然后按下按钮触发：

function copyText(){
    var aux = document.createElement("input");
    aux.setAttribute("value", $("#message").text);
    document.body.appendChild(aux);
    aux.select();
    document.execCommand("copy");
}

这样的事情应该有效

然后在按钮上添加onclick="copyText()"

使用jquery复制按钮

2 个答案: