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 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
vue中使用mockjs配置和使用方式
Apr 06 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连接sftp的作用以及实例代码
2019/09/23 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
JS中offset和匀速动画详解
2018/02/06 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
Python判断直线和矩形是否相交的方法
2015/07/14 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
Python super()函数使用及多重继承
2020/05/06 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
资产经营总监岗位职责范文
2013/12/01 职场文书
综合实践教学反思
2014/01/31 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
医学求职自荐信
2014/06/21 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
校园安全教育心得体会
2016/01/15 职场文书
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
基于redis+lua进行限流的方法
2022/07/23 Redis