js兼容各个浏览器的复制功能
看似简单的复制功能,用js做起来竟然遇到各种情况。刚开始在网上搜索到复制功能的几种实现方法,但是都不兼容。最后还是用的插件代码如下
html模板
<tr>
<td>1</td>
<td>小明</td>
<td style="position:relative;">
<input style="width: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="width: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兼容所有浏览器的复制。比较简单方便。
js兼容各个浏览器的复制功能的更多相关文章
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- ZeroClipboard插件:兼容各浏览器网页复制功能
常规利用JS编写的网页复制功能只对IE有效,无法做到兼容其它浏览器,代码如下: function copyToClipBoard(){ var clipBoardContent="" ...
- JS兼容IE浏览器的方法
背景 系统需要兼容蛋疼的IE6... 解决方案 *{ 兼容IE6-8 }* <!--[if lt IE 9]> <script src="@{'/public/mng/ja ...
- js兼容多浏览器的关闭当前页面
关闭当前页面,相信不少人在开发中都遇到过这个需求,但面对这么多的浏览器,要做到js的兼容还需要做特殊的处理.关于这方面网上有很多的资料,但大多都是复制粘贴的,没有达到兼容的效果,或者是效果不好. 下面 ...
- 调用iframe 中的js[兼容各种浏览器]
*chrome浏览器需要在服务器环境中测试 <!DOCTYPE html> <html> <head> <meta http-equiv="cont ...
- 如何处理使用js兼容所有浏览器的问题
首先:如何处理兼容问题 1.如果两个都是属性,用逻辑||做兼容 2.如果有一个是方法,用三元做兼容 3.如果是多个属性或方法,封装函数做兼容 分享两个小知识点: 1.取消拖拽的默认行为: docume ...
- JS兼容各个浏览器的本地图片上传即时预览效果\、
在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果,在IE10以下浏览器中使用滤镜来解决图片显示问题. HTML5中的FileReader对象主要是把文件 ...
- ZeroClipboard.js兼容各种浏览器复制到剪切板上
http://www.cnblogs.com/huijieoo/articles/5569990.html <script type="text/javascript" sr ...
- JS兼容所有浏览器的一段加入收藏代码,设置为首页
<script language="javascript" type="text/javascript"> function addfavorite ...
随机推荐
- tyvj P1209 - 拦截导弹 平面图最小割&&模型转化
P1209 - 拦截导弹 From admin Normal (OI)总时限:6s 内存限制:128MB 代码长度限制:64KB 背景 Background 实中编程者联盟为了培养技 ...
- Connect them
zoj3204: 最小生成树,要求最小字典序的解. 用kruscal算法,先排序,输出的时候也要排序. /* zoj3204 解题思路: 赤裸裸的最小生成树.只是要求输出字典序最小的连接方案. 所以在 ...
- Velocity
vm模板 设计原则 让前端来写后端的vm模板,并且前端不需要搭建各种繁杂的后端环境,前后端以 .vm 为沟通桥梁,另外模板的数据源可以在项目开始前前后端约定之后生成JSON文件,从而使两个角色并行开发 ...
- ping详解
Linux系统的ping命令是常用的网络命令,它通常用来测试与目标主机的连通性,我们经常会说“ping一下某机器,看是不是开着”.不能打开网页时会说“你先ping网关地址192.168.1.1试试”. ...
- 【HDOJ】2782 The Worm Turns
DFS. /* 2782 */ #include <iostream> #include <queue> #include <cstdio> #include &l ...
- 分布式文件系统FastDFS安装与配置(单机)
安装包如下:fastdfs-nginx-module_v1.16.tar.gzFastDFS_v5.05.tar.gzlibfastcommon-master.zipnginx-1.8.0.tar.g ...
- (转载)函数:mysqli_query和mysql_query有何区别?
(转载)http://wzan315.blog.163.com/blog/static/37192636201241732045299/ Mysqli.dll是一个允许以对象的方式或者过程操作数据库的 ...
- Hibernate(八)一对多单向关联映射
上次的博文Hibernate从入门到精通(七)多对一单向关联映射我们主要讲解了一下多对一单向关联映射, 这次我们继续讲解一下一对多单向映射. 一对多单向关联映射 在讲解一对多单向关联之前,按 照我们的 ...
- NGUI-学习笔记(2)一个项目需求
using UnityEngine; using System.Collections; public class ins1 : MonoBehaviour { //bool isTarget = f ...
- 待解决)leetcode 路径和 dfs 线序遍历
Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...