首先加载本地clipboard.js文件;
然后就是在body中加上要复制或剪切的文本域内容以及按钮;
使用了HTML5的data-属性,用来定位复制对象目标,它指向了文本域#foo,说明复制的是#foo中的value内容,aria-label属性定义了复制成功后的信息,用来提示复制结果信息。
js导入
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>
!上面缺少的文件可以在网上搜索查找。
2.代码
<div class="copybox clearfix">
<div class="copybox-n1 clearfix">
<div style="width:232pxfloat:leftheight:36pxoverflow:hiddenzoom:1">
<input type="text" id="mytxt1" value="点击右侧复制按钮复制" class="n1input">
</div>
<div style="width: 48pxheight: 36pxposition: absolutemargin-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:232pxfloat:leftheight:36pxoverflow:hiddenzoom:1">
<input type="text" id="mytxt2" value="点击右侧复制按钮复制" class="n1input">
</div>
<div style="width: 48pxheight: 36pxposition: absolutemargin-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>
3.参考资料
http://www.w3cfuns.com/blog-5458304-5403309.html
可用JS。
方法一:只对IE有效:<script>function copyToClipboard() { var d = document.all("source").value window.clipboardData.setData('text', d) } </script><button onclick="copyToClipboard()">拷贝</button> <input type="text" size=20 id="source" value="测试数据"><button onclick="alert(window.clipboardData.getData('text'))">显示</button> <button onclick="window.clipboardData.clearData('text')">清空</button>对于直接复制是一个很危险的操作,为了安全谷歌和其他浏览器都做了阻止,除了出来IE这种垃圾浏览器以外。目前网上的都是借助flash来达到兼容,其他的方法还真没见过。另外html5当然以谷歌内核为主:有条报道:Chrome doesn't do document.execCommand('copy') since October 2010.
虽然2010年后谷歌就不允许使用上述方法进行复制了,但是以提醒的方法来做:
function copyToClipboard(text) { window.prompt("Copy to clipboard: Ctrl+C, Enter", text)}