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 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
js实现分页功能
May 24 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
利用python获取Ping结果示例代码
2017/07/06 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
python实现飞机大战游戏
2020/10/26 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
美德少年事迹材料
2014/01/23 职场文书
公司股权转让协议书
2014/04/12 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
室内设计专业自荐信
2014/05/31 职场文书
分公司经理任命书
2014/06/05 职场文书
学术会议邀请函
2015/01/30 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
花田少年史观后感
2015/06/16 职场文书
婚礼家长致辞
2015/07/27 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python