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 相关文章推荐
纯css下拉菜单 无需js
Aug 15 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
vue.js todolist实现代码
Oct 29 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
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中session变量的销毁
2014/02/27 PHP
深入理解PHP中的global
2014/08/19 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
js资料toString 方法
2007/03/13 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
微信小程序实现倒计时补零功能
2018/07/09 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
react结合bootstrap实现评论功能
2020/05/30 Javascript
python实现快速排序的示例(二分法思想)
2018/03/12 Python
Python 元类实例解析
2018/04/04 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
Python Pandas 箱线图的实现
2019/07/23 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
乔迁宴答谢词
2014/01/21 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
给老婆道歉的话
2015/01/20 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
Python实现byte转integer
2021/06/03 Python