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 相关文章推荐
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
javascript打印输出json实例
Nov 11 Javascript
jQuery的position()方法详解
Jul 19 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 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 连接mysql连接被重置的解决方法
2011/02/15 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
Python代码的打包与发布详解
2014/07/30 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
代码详解django中数据库设置
2019/01/28 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
Python2与Python3的区别详解
2020/02/09 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
公司保密承诺书
2014/03/27 职场文书
新闻传播专业求职信
2014/07/22 职场文书
租车协议书
2015/01/27 职场文书
士兵突击观后感
2015/06/16 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python