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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
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静态类的原罪详解
2013/05/06 PHP
Symfony生成二维码的方法
2016/02/04 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
Three.js学习之网格
2016/08/10 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
python输出指定月份日历的方法
2015/04/23 Python
python简单分割文件的方法
2015/07/30 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
Python多进程写入同一文件的方法
2019/01/14 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
python3 xpath和requests应用详解
2020/03/06 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
Pandas的数据过滤实现
2021/01/15 Python
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
美国轮胎网站:Priority Tire
2018/11/28 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
教育实习指导教师评语
2014/12/31 职场文书
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript