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 相关文章推荐
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 Javascript
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 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在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
firefo xml 读写实现js代码
2009/06/11 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
Node.js简单入门前传
2017/08/21 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
JS闭包经典实例详解
2018/12/20 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
python ElementTree 基本读操作示例
2009/04/09 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
python中的编码知识整理汇总
2016/01/26 Python
简单谈谈Python流程控制语句
2016/12/04 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
python opencv读mp4视频的实例
2018/12/07 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
ktv好的活动方案
2014/08/15 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
医院科室评语
2015/01/04 职场文书