zeroclipboard官网:https://github.com/zeroclipboard/ZeroClipboard
下载压缩包,得到两个“ZeroClipboard.js”和“ZeroClipboard.swf”两个文件。
首先页面中载入ZeroClipboard.js
ZeroClipboard.setMoviePath( “ZeroClipboard.swf路径” );来指定ZeroClipboard.swf
的地址。
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ZeroClipboard demo实例</title>
<script src="../js/ZeroClipboard.js"></script>
<script src="../js/jquery.min.js"></script>
<script>
$(function(){
var clip = new ZeroClipboard( document.getElementById("copy-button"), {
//<span style="color: #1d1d1d; font-family: tahoma, arial, 宋体; letter-spacing: 1px; line-height: 29px; white-space: normal; background-color: #ffffff;">指定ZeroClipboard.swf的路径</span>
moviePath: "../js/ZeroClipboard.swf"
} );
clip.on( 'load', function(client) {
// alert( "movie is loaded" );
} );
clip.on( 'complete', function(client, args) {
//this.style.display = 'none'; // "this" is the element that was clicked
alert("复制成功,复制的内容为: " + args.text );
} );
clip.on( 'mouseover', function(client) {
// alert("mouse over");
} );
clip.on( 'mouseout', function(client) {
// alert("mouse out");
} );
clip.on( 'mousedown', function(client) {
//在这里为剪贴板赋值
clip.setText($("#_input").val());
} );
clip.on( 'mouseup', function(client) {
// alert("mouse up");
} );
});
</script>
</head>
<body>
<button id="copy-button" title="复制到剪贴板">复制到剪贴板</button>
<input type="text" id="_input">
</body>
</html>
$(document).delegate('.copy_btn',"click",function(){ var vfont='耶!复制成功喽!', cons = $(this).prev().val(); if(document.all){ window.clipboardData.setData("Text",cons); alert(vfont); }else{
alert("该浏览器不支持,请手动复制!");
} });