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>