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>

  

原文地址:https://www.cnblogs.com/naokr/p/3422930.html