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 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
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 file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
python遍历小写英文字母的方法
2019/01/02 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Python sep参数使用方法详解
2020/02/12 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
科研课题实施方案
2014/03/18 职场文书
企业授权委托书范本
2014/09/22 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
校园广播稿精选
2014/10/01 职场文书