zoukankan      html  css  js  c++  java
  • js兼容各个浏览器的复制功能

    看似简单的复制功能,用js做起来竟然遇到各种情况。刚开始在网上搜索到复制功能的几种实现方法,但是都不兼容。最后还是用的插件代码如下

    html模板

     <tr>
               <td>1</td>
               <td>小明</td>
               <td style="position:relative;">
                      <input style="350px; height:28px; border:none;background:none;" id="view_url" name="view_url" value="www.baidu.com" />
                    <a style="display:block" class="copy-input" href="#">复制链接</a>
                </td>
    </tr>
    <tr>
               <td>2</td>
               <td>小红</td>
               <td style="position:relative;">
                      <input style="350px; height:28px; border:none;background:none;" id="view_url" name="view_url" value="www.baidu.com" />
                    <a style="display:block" class="copy-input" href="#">复制链接</a>
                </td>
    </tr>
    ...

    这个是循环遍历出来的数据,对某一个数据进行复制,可以粘贴任意位置。插件下载的有两个。一个是jquery.zclip.js,另一个是ZeroClipboard.swf

    $(document).ready(function(){
    /* 定义所有class为copy-input标签,点击后可复制class为view_url的文本 */
        $(".copy-input").zclip({
            path: "/Public/js/ZeroClipboard.swf",//swf存放的位置
            copy: function(){
            return $(this).prev('input[name="view_url"]').val();//复制的值
            },
            afterCopy:function(){/* 复制成功后的操作 */
                var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>☺ 复制成功</div></div>");
                $("body").find(".copy-tips").remove().end().append($copysuc);
                $(".copy-tips").fadeOut(3000);//3秒后自动消失
            }
        });
    });

    利用flash兼容所有浏览器的复制。比较简单方便。

  • 相关阅读:
    《构建之法》第8、9、10章 读后感
    [团队项目]SCRUM项目6.0 7.0 (新)
    [团队项目]SCRUM项目5.0
    [团队项目]SCRUM项目4.0
    [团队项目] Scrum 项目 3.0 SCRUM 流程的步骤2: Spring 计划
    [操作系统]实验三 进程调度模拟程序
    [团队项目] Scrum 项目 2.0 产品BACKLOG
    复利计算的总结
    复利/单利计算程序进度0321更新
    0312 复利计算器2.0 运行与介绍
  • 原文地址:https://www.cnblogs.com/angellating/p/4950653.html
Copyright © 2011-2022 走看看