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中跨域访问出现'没有权限'的错误
Aug 20 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
微信小程序 video组件详解
Oct 25 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 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
星际争霸秘籍
2020/03/04 星际争霸
PHP的explode和implode的使用说明
2011/07/17 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
jQuery - css() 方法示例详解
2014/01/16 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
react的hooks的用法详解
2020/10/12 Javascript
python原始套接字编程示例分享
2014/02/21 Python
Python中实现结构相似的函数调用方法
2015/03/10 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
struct和class的区别
2015/11/20 面试题
《莫泊桑拜师》教学反思
2014/04/23 职场文书
债务授权委托书范本
2014/10/17 职场文书
体检通知范文
2015/04/21 职场文书
多人股份制合作协议书
2016/03/19 职场文书
小学四年级作文之写景
2019/08/23 职场文书
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python