[导读] 文章介绍了两种常用的点击复制文本框内容方法,一种是but IE only,同样的这个也是我们经常使用的。优点是体积小,仅有十来行代码,但缺点也很明显,只支持IE及以IE为内核的浏览器,另一种插件+FLASH控件的方法

文章介绍了两种常用的点击复制文本框内容方法,一种是but IE only,同样的这个也是我们经常使用的。优点是体积小,仅有十来行代码,但缺点也很明显,只支持IE及以IE为内核的浏览器,另一种插件+FLASH控件的方法–ZeroClipboard可用于任何浏览器。

一、常规方法
  but IE only,同样的这个也是我们经常使用的。优点是体积小,仅有十来行代码,但缺点也很明显,只支持IE及以IE为内核的浏览器。
具体使用及代码可见D

注:该脚本对非IE内核的浏览器无效。想要兼容全浏览器,可以采用插件+FLASH控件的办法,具体可点击 兼容各浏览器的点击复制文本框内容的Jquery插件

使用方法如下:

引入Jquery后,执行如下函数代码:

$(function(){
$("#d_clip_button").click(function(){
var Url=$("#yao_txt").text();
copyToClipboard(Url);
});
});

其中copyToClipboard的函数如下:

function copyToClipboard(maintext){
if (window.clipboardData){
window.clipboardData.setData("Text", maintext);
}else if (window.netscape){
try{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}catch(e){
alert("该浏览器不支持一键复制!n请手工复制文本框链接地址~");
}
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip) return;
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!trans) return;
trans.addDataFlavor('text/unicode');
var str = new Object();
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
var copytext=maintext;
str.data=copytext;
trans.setTransferData("text/unicode",str,copytext.length*2);
var clipid=Components.interfaces.nsIClipboard;
if (!clip) return false;
clip.setData(trans,null,clipid.kGlobalClipboard);
}
alert("以下内容已经复制到剪贴板nn" + maintext);
}

二、插件+FLASH控件的方法–ZeroClipboard
  对于使用非IE内核的用户来说,当然不死心,希望能找到一个全面兼容的方式,在一个网站一扒,就把这个插件ZeroClipboard给扒下来了,该插件能支持所有的浏览器,但是缺点也明显,首先要基于Jquery库,插件的个头也有10K,当然压缩后可以小一些,另外有一个FLASH控件,有可能在没装FLASH播放器的机器上控件不可用(但没装FLASH播放器的用户基本很少)

点击此处下载该插件: http://pan.baidu.com/s/1pKxnip9
注:因为采用FLASH控件的文件实现兼容,所以本页面中请在服务器上浏览才能获得看到效果。

优点:兼容各浏览器
缺点:插件有10K大小,还需要引入一个Jqueyr的库。
如果不需要全浏览器的兼容,可以使用 常规复制文本框内容的脚本

引入Jquery后再引入插件ZeroClipboard,同时下载 FLASH控件 和JS文件放同一目录 ,在页面中添加执行的脚本。完整代码如下:

<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
$(function(){
var clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
clip.setCSSEffects( true );
clip.addEventListener( 'mouseDown', function(client){
clip.setText( $('#yao_txt').val() );
});
clip.addEventListener( 'complete', function(){alert('复制成功');});
clip.glue( 'd_clip_button' );
});
</script>

JQuery点击复制文本框内容的方法插件的更多相关文章

  1. php锁定文本框内容的方法

    有时候我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如<input type="text" name="zg" value="中国& ...

  2. swing复制文本框内容

    Clipboard clipboard = Toolkit.getDefaultToolkit().getSystemClipboard(); //得到系统剪贴板 String text = jTex ...

  3. vue点击按钮复制文本框内容

    1.npm进行安装 npm install clipboard --save 2.在需要使用的组件中import 引用方法:import Clipboard from 'clipboard'; 3.添 ...

  4. js 实现点击复制文本内容

    js  实现点击复制文本内容 <table> <tr><td>姓名:<span onclick="copyContent(this);" ...

  5. jQuery—— jQuery get方法+一般处理程序处理文本框内容

    网上常常看到这种交互方式,当去一个站点注冊username的时候,假设文本框内没有输入数据,或者数据输入的内容格式不正确.就会将文本框变成红色来提示你输入的内容有误. 自己将这个文本框验证的方式改变了 ...

  6. jQuery登录界面的文本框焦点代码

    <script type="text/javascript"> $(function(){ $("#address").focus(function ...

  7. JQuery初始加载时注册文本框失去焦点事件

    在JQuery初始加载时注册文本框失去焦点事件 $(function(){ $('#文本框ID').blur(function(){ //对文本框内容进行处理 }); });

  8. python selenium无法清除文本框内容问题

    正常是我们在清除文本框内容的时候,都会使用 clear() 函数进行清除,但是有时候会出现,清除完成后再点击查询时,文本框的内容会再次自动填充,这个时候我们可以选择以下方式: #清空查询条件drive ...

  9. jquery删除添加输入文本框

    效果体验:http://hovertree.com/texiao/jquery/67/ 效果图: 参考:http://hovertree.com/h/bjaf/traversing_each.htm ...

  10. jquery点击复选框触发事件给input赋值

    体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...

随机推荐

  1. css cursor: url() 使用火狐浏览器问题,鼠标没有效果

    在火狐浏览器问题使用cursor: url():鼠标没有效果,需要给使用标签添加一个height

  2. Linux系列---【内存占用过高问题排查思路】

    内存占用过高问题排查思路 1.使用top命令查看后台任务 按shift+M使应用按内存使用率排序,定位到第一个使用内存最高的应用,并找到对应的PID. 2.使用ps命令查看对应的pid对应哪个应用 p ...

  3. OSIDP-单处理器调度-09

    处理器调度的类型 处理器调度的目的是为了满足系统的目标,将进程分配到处理器上执行. 系统并发度:正等待处理器处理的进程个数.(这里的表述和08里面的不同,以这里为准.主要是懒得改,见谅= =) 长程调 ...

  4. 关于css在html的三种使用方式

    关于css在html的三种使用方式 1.内联样式(直接在html里面使用style) eg:<h1 style="color:skyblue">这是一个测试标题< ...

  5. FtpClient上传文件异常:java.net.SocketException: Connection reset

    FtpClient上传文件异常:java.net.SocketException: Connection reset 这问题折磨我快一天了,下午这会儿终于解决了,问题不在程序错误,原因还是出在上传图片 ...

  6. 反射(Reflect)

    反射摘要: 反射是java中非常强大的工具,利用反射可以书写框架,而框架就是半完成的代码.反射就是对类中的各个部分进行封装为其它对象,并且可以随时提取出Class或Object成员的属性,例如成员变量 ...

  7. 任意的形如 z = F(x,y)的曲面生成与显示---基于OpenGL Core Profile

    运行结果:   (圆锥面) (抛物面) (马鞍面) 其中的做法是:从顶部看上去就是一个平面网格.每个点的 z.x的位置都是程序细分出来的(指定起始.结束.步长).比较固定.但高度 y 的计算使用 用户 ...

  8. 9.22 2020 实验 3:Mininet 实验——测量路径的损耗率

    一.实验目的 在实验 2 的基础上进一步熟悉 Mininet 自定义拓扑脚本,以及与损耗率相关的设定:初步了解 Mininet 安装时自带的 POX 控制器脚本编写,测试路径损耗率.   二.实验任务 ...

  9. 2020/5/14-笔记:Oracle数据库新建用户与给用户授权

  10. Integer类自动拆箱,装箱解析

    1.自动拆箱 例1: int i1 = 10; Integer i2 = new Integer(10); System.out.println(i1 == i2); 这个结果是true i1为基本数 ...