js实现一键复制功能


Posted in Javascript onMarch 16, 2017

项目描述:最近做一个移动端活动页面,用户抽奖后会生成一个兑换码,为了优化用户体验,需要做一个复制按钮,能够一键复制兑换码。

项目需求: 兼容移动端所有主流浏览器。并且做为安卓和IOS的H5页面。

目前能够实现复制功能的方法有以下几种:

  1. execCommand("copy");
  2. clipboardData;
  3. ZeroClipboard.js

1.execCommand:是doucment对象的方法,可以实现浏览器菜单的很多功能,如保存文件,打开新文件,撤销,复制,等等。可以更好的完成文本编辑

有如下用法:

【全选】

格式:document.execCommand("SelectAll");

【打开】

格式:document.execCommand("Open");

【另存为】

格式:document.execCommand("SaveAs");

【打印】

格式:document.execCommand("print");

【剪切】

格式:document.execCommand("Cut","false",null);

【删除】

格式:document.execCommand("Delete","false",null);

【改变文本字体】

格式:document.execCommand("FontName","false",sFontName);

【改变字体大小】

格式:document.execCommand("FontSize","false",sSize|iSize);

【使绝对定位的元素可拖动】

格式:document.execCommand("2D-Position","false","true");

【复制】

格式:document.execCommand("Copy","false",null);

等等

应用实例:

HTML:

<input onclick="copy()" value="你好.要copy的内容!">

js代码:

function copy(){
 var Url2=document.getElementById("js-copy-text");
 Url2.select(); // 选择对象
 try{
  if(document.execCommand('copy', false, null)){
   document.execCommand("Copy");
   alert("已复制好,可贴粘。");
  } else{
   alert("复制失败,请手动复制");
  }
  } catch(err){
   alert("复制失败,请手动复制");
  }
}

注意:经测试该方法,PC端IE需要手动设置权限,其他浏览器均支持,M端很少浏览器支持;

2. clipboardData:对象提供了对剪贴板的访问

clipboardData有三个方法:

  1. clearData(sDataFormat)删除剪贴板中指定格式的数据;
  2. clearData(sDataFormat)getData(sDataFormat)从剪贴板中获取制定格式的数据;
  3. clearData(sDataFormat)setData(sDataFormat,sData)给剪贴板赋予指定格式的数据,返回true表示操作成功;

应用实例:

<input onclick="copy(this)" value="你好.要copy的内容!">

js代码:

function copy(){
 window.clipboardData.setData("text",document.getElementById("mytext").value);
 alert("The text is on the clipboard, try to paste it!");
}

注意:经测试该方法,仅在IE浏览器中有效;

在其他浏览器运行会报错:

firefox:TypeError: window.clipboardData is undefined

chrom: TypeError: Cannot read property 'setData' of undefined

经查资料:

MSDN https://msdn.microsoft.com/en-us/library/ms535220(v=vs.85).aspx
This object is available in script as of Microsoft Internet Explorer 5.
http://help.dottoro.com/ljctuhrg.php 也表示该方法出于对安全性的考虑,现在只支持IE:
In Firefox, Opera, Google Chrome and Safari, use the execCommand method with the 'Paste' command to retrieve and with the 'Copy' command to set the text content of the clipboard. Because of security restrictions, this method may not always work, see Example 2 for details.

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
Vue3 源码导读(推荐)
Oct 14 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 Javascript
js判断PC端与移动端跳转
Dec 24 #Javascript
jquery编写日期选择器
Mar 16 #Javascript
jquery事件与绑定事件
Mar 16 #Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 #Javascript
JSON与js对象序列化实例详解
Mar 16 #Javascript
JS对象的深度克隆方法示例
Mar 16 #Javascript
JS对象深度克隆实例分析
Mar 16 #Javascript
You might like
PHP完整的日历类(CLASS)
2006/11/27 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
图片之间的切换
2006/06/26 Javascript
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
Python和Java进行DES加密和解密的实例
2018/01/09 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python十进制转二进制的详解
2020/02/07 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
质量月口号
2014/06/20 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
Python竟然能剪辑视频
2021/05/25 Python
JavaScript实现队列结构过程
2021/12/06 Javascript
在Python 中将类对象序列化为JSON
2022/04/06 Python