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 相关文章推荐
JS中的prototype与面向对象的实例讲解
May 22 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
js实现密码强度检验
Jan 15 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
vue实现简单图片上传
Jun 30 Javascript
使用js和canvas实现时钟效果
Sep 08 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
PHP采集腾讯微博的实现代码
2012/01/19 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
Python读写配置文件的方法
2015/06/03 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Python3多线程基础知识点
2019/02/19 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
详解python 中in 的 用法
2019/12/12 Python
python如何实现单链表的反转
2020/02/10 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
Python中qutip用法示例详解
2020/10/02 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
模具专业毕业推荐信
2014/03/08 职场文书
授权委托书范本
2014/04/03 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
元宵节晚会主持词
2015/07/01 职场文书
感恩教师主题班会
2015/08/12 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers