zoukankan      html  css  js  c++  java
  • [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("该浏览器不支持,请手动复制!");
    	    }
    
    });
    

      

  • 相关阅读:
    Linux input子系统学习总结(一)---- 三个重要的结构体
    DRM/KMS 基本组件介绍
    Framebuffer 驱动学习总结(二)---- Framebuffer模块初始化
    Framebuffer 驱动学习总结(一) ---- 总体架构及关键结构体
    Linux USB驱动学习总结(三)---- USB鼠标的加载、初始化和通信过程
    Linux USB驱动学习总结(一)---- USB基本概念及驱动架构
    使用Python调用动态库
    使用 SignalR与SSE(Sever sent event)向客户端推送提示信息
    在IDEA下使用Spring Boot的热加载(Hotswap)
    使用Spring boot + jQuery上传文件(kotlin)
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/3920070.html
Copyright © 2011-2022 走看看