[JavaScript] js 复制到剪切板

时间:2023-03-08 16:26:03
[JavaScript] js 复制到剪切板

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("该浏览器不支持,请手动复制!");
} });