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之函数直接量(function(){})()
Jun 29 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
原生js实现购物车
Sep 23 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 Javascript
vue项目打包后路由错误的解决方法
Apr 13 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 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
dess中一个简单的多路委托的实现
2010/07/20 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
vue 权限认证token的实现方法
2018/07/17 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
python生成式的send()方法(详解)
2017/05/08 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
和谐家庭演讲稿
2014/05/24 职场文书
爱牙日活动总结
2014/08/29 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书