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 相关文章推荐
jquery高效反选具体实现
May 05 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 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 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
Display SQL Server Version Information
2007/06/21 Javascript
javascript 对象定义方法 简单易学
2009/03/22 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
Python向日志输出中添加上下文信息
2017/05/24 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
python excel和yaml文件的读取封装
2021/01/12 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
工业学校毕业生自荐信范文
2014/01/03 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL