JQuery点击复制文本框内容的方法插件
[导读] 文章介绍了两种常用的点击复制文本框内容方法,一种是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点击复制文本框内容的方法插件的更多相关文章
- php锁定文本框内容的方法
有时候我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如<input type="text" name="zg" value="中国& ...
- swing复制文本框内容
Clipboard clipboard = Toolkit.getDefaultToolkit().getSystemClipboard(); //得到系统剪贴板 String text = jTex ...
- vue点击按钮复制文本框内容
1.npm进行安装 npm install clipboard --save 2.在需要使用的组件中import 引用方法:import Clipboard from 'clipboard'; 3.添 ...
- js 实现点击复制文本内容
js 实现点击复制文本内容 <table> <tr><td>姓名:<span onclick="copyContent(this);" ...
- jQuery—— jQuery get方法+一般处理程序处理文本框内容
网上常常看到这种交互方式,当去一个站点注冊username的时候,假设文本框内没有输入数据,或者数据输入的内容格式不正确.就会将文本框变成红色来提示你输入的内容有误. 自己将这个文本框验证的方式改变了 ...
- jQuery登录界面的文本框焦点代码
<script type="text/javascript"> $(function(){ $("#address").focus(function ...
- JQuery初始加载时注册文本框失去焦点事件
在JQuery初始加载时注册文本框失去焦点事件 $(function(){ $('#文本框ID').blur(function(){ //对文本框内容进行处理 }); });
- python selenium无法清除文本框内容问题
正常是我们在清除文本框内容的时候,都会使用 clear() 函数进行清除,但是有时候会出现,清除完成后再点击查询时,文本框的内容会再次自动填充,这个时候我们可以选择以下方式: #清空查询条件drive ...
- jquery删除添加输入文本框
效果体验:http://hovertree.com/texiao/jquery/67/ 效果图: 参考:http://hovertree.com/h/bjaf/traversing_each.htm ...
- jquery点击复选框触发事件给input赋值
体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...
随机推荐
- C#发送字符串转字节含空格与0x需删去
主要作用:清除发送字符串转字节中的空格和16进制前缀0x, 字节转换按两位字符转换为一个字节,多余一位按一位字符转换一个字节 //清除空格和16进制前缀发送 String sendstr;// = n ...
- swagger 兼容 docker 转发 配置
app.UseSwagger(c => { c.PreSerializeFilters.Add((swagger, httpReq) => { string swagger_index_u ...
- idea设置springboot项目热部署
转自: https://www.cnblogs.com/zhukf/p/12672180.html 一.什么是热部署? 热部署,就是在应用正在运行的时候升级软件,却不需要重新启动应用. 二.什么是Sp ...
- 借助5G智能网关实现无人化智慧农业应用
发展智慧农业是新时代的必由之路.依托5G+物联网技术赋能农业生产,能够实现更少的人员需求,更大面积的综合土地管理,更实时精细的生产环境监测,更智能的生产自主管控.5G技术正以其广连接.低时延的优势,助 ...
- ffmpeg设置超时时间
使用 -rw_timeout 参数 注意:1.参数单位是微秒,而不是秒.1秒(s)=1000000微秒(μs) 2.参数要放在开流前,否则不会生效 参考资料: FFmpeg命令读取RTMP流如何设 ...
- 3.javaweb-servlet
1. 设置编码 tomcat8之前,设置编码: 1)get请求方式: //get方式目前不需要设置编码(基于tomcat8) //如果是get请求发送的中文数据,转码稍微有点麻烦(tomcat8之前) ...
- .net core中使用HttpClient碰到的问题:This instance has already started one or more requests. Properties can only be modified before sending the first request
项目里使用httpclient一般加staic或者单例来防止每次请求都会新建立一个连接,从而占用太多的服务器资源, 问题产生 但是今天新加的一个方法中每次需要请求不同的url,这时候就出现了错误: 就 ...
- [Unity移动端]gradle打包
建议先看一下这篇文章: https://linxinfa.blog.csdn.net/article/details/118553713?spm=1001.2101.3001.6650.10& ...
- vue3 ThreeJS 引入obj模型过暗的问题
当我单纯地用MTLLoader引入材质, OBJLoader引入模型并添加到场景中时, 发现模型非常得暗. 需要将环境光的强度设置到3.5左右看起来才比较正常. 但正常情况下环境光的值不应该超出1. ...
- Oracle-安装问题:Win10系统离线安装framework3.5报0x8024402c的问题
Oracle-安装问题:Win10系统离线安装framework3.5报0x8024402c的问题 像神州信用政府版本相关的系统都不允许联网,也就需要离线安装下,Net3.5之类的文件 具体步骤可以参 ...