JavaScript实现复制内容到粘贴板代码


Posted in Javascript onMarch 31, 2016

最近做了一个前端项目,其中有需求:通过button直接把input或者textarea里的值复制到粘贴板里。下面小编把我实现思路及代码分享给大家,大家可以直接引入项目中。

具体代码如下所示:

function copyToClipboard(elem) {
// create hidden text element, if it doesn't already exist
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// can just use the original source element for the selection and copy
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;
} else {
// must use a temporary form element for the selection and copy
target = document.getElementById(targetId);
if (!target) {
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = targetId;
document.body.appendChild(target);
}
target.textContent = elem.textContent;
}
// select the content
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length);
// copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch(e) {
succeed = false;
}
// restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
if (isInput) {
// restore prior selection
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// clear temporary content
target.textContent = "";
}
return succeed;
}

我们可以这样直接调用这个方法:

copyToClipboard(document.getElementById("name"));

这样id为name的值进入了粘贴板了。

关于JavaScript实现复制内容到粘贴板代码小编就给大家介绍到这里,希望对大家有所帮助!

Javascript 相关文章推荐
javascript 面向对象编程基础:封装
Aug 21 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
angular4中引入echarts的方法示例
Jan 29 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
vue设置默认首页的操作
Aug 12 Javascript
Javascript文本框脚本实现方法解析
Oct 30 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
JavaScript是如何实现继承的(六种方式)
Mar 31 #Javascript
JS判断元素是否在数组内的实现代码
Mar 30 #Javascript
javascript检查某个元素在数组中的索引值
Mar 30 #Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 #Javascript
谈一谈js中的执行环境及作用域
Mar 30 #Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 #Javascript
用JS生成UUID的方法实例
Mar 30 #Javascript
You might like
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
javascript 数组学习资料收集
2010/04/11 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
js实现省级联动(数据结构优化)
2020/07/17 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
python远程登录代码
2008/04/29 Python
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
python数据分析:关键字提取方式
2020/02/24 Python
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
《记承天寺夜游》教学反思
2014/02/16 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年质检工作总结
2014/11/26 职场文书
单位同意报考证明
2015/06/17 职场文书
教师节大会主持词
2015/07/06 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python
Python turtle实现贪吃蛇游戏
2021/06/18 Python