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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
Validform表单验证总结篇
Oct 31 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
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的5个入手程序
2006/11/23 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
Python的randrange()方法使用教程
2015/05/15 Python
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
python中四舍五入的正确打开方式
2021/01/18 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
高三毕业生自我鉴定
2013/12/20 职场文书
见习期自我鉴定
2014/01/31 职场文书
2013年军训通讯稿
2014/02/05 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
中考学习决心书
2015/02/04 职场文书