WordPress通过JS实现一键复制 指定内容 的教程

shopify 2020-3-13 2643

WordPress通过JS实现一键复制 指定内容 的教程。

共有4种。

第一种

<a id="copy" data-text="123456">复制文本</a>
<script type="text/javascript">
$(function(){
    var clipboard = new Clipboard('#copy',{ 
       text: function(trigger) { 
          alert("复制成功!");
          return trigger.getAttribute('data-text'); 
       }
    });
});
</script>

第二种

<div>
<span id="copyMy"> 复制我试试</span>
<button onClick="copyFn()">点击复制</button>
</div>
<script>
function copyFn() {
var val = document.getElementById('copyMy');
window.getSelection().selectAllChildren(val);
document.execCommand("Copy");
alert("已复制好,可贴粘。");
 
}
</script>

第三种

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>
<div class="copybox clearfix">
  <div class="copybox-n1 clearfix">
    <div style="width:232px;float:left;height:36px;overflow:hidden;zoom:1">
      <input type="text" id="mytxt1" value="点击右侧复制按钮复制" class="n1input">
    </div>
    <div style="width: 48px; height: 36px; position: absolute; margin-left: 232px;*margin-left:0px;_margin-left: 0">
      <button id="copy_input1" class="n1-btn">复制</button>
    </div>
  </div>
  <div class="copybox-n2 clearfix">
    <div style="width:232px;float:left;height:36px;overflow:hidden;zoom:1">
      <input type="text" id="mytxt2" value="点击右侧复制按钮复制" class="n1input">
    </div>
    <div style="width: 48px; height: 36px; position: absolute; margin-left: 232px;*margin-left:0px; _margin-left:0">
      <button id="copy_input2" class="n1-btn">复制</button>
    </div>
  </div>
</div>
<script type="text/javascript">
  $(function() {
    /*复制*/
    $('#copy_input1').zclip( {
      path : 'js/ZeroClipboard.swf',
      copy : function() {return $('#mytxt1').val();/*复制内容*/},
      afterCopy : function() {alert("复制成功");/*复制成功*/}
    });
    /*复制*/
    $('#copy_input2').zclip( {
      path : 'js/ZeroClipboard.swf',
      copy : function() {return $('#mytxt2').val();/*复制内容*/},
      afterCopy : function() {alert("复制成功");/*复制成功*/}
    });
  });
</script>




最新回复 (0)
全部楼主
返回