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英文日期(有时间)选择器
May 02 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
小议Javascript中的this指针
2010/03/18 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
Python 字符串池化的前提
2020/07/03 Python
python 通过exifread读取照片信息
2020/12/24 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
宿舍卫生检讨书
2014/01/16 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
如何用python绘制雷达图
2021/04/24 Python