function copyToClipboard(textToCopy) {
// navigator clipboard 需要https等安全上下文
if (navigator.clipboard && window.isSecureContext) {
// navigator clipboard 向剪贴板写文本
return navigator.clipboard.writeText(textToCopy).then(function () {
layer.msg("复制成功Https!", { icon: 1 })
});
} else {
// 创建text area
let textArea = document.createElement("textarea");
textArea.value = textToCopy;
// 使text area不在viewport,同时设置不可见
textArea.style.position = "absolute";
textArea.style.opacity = 0;
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
return new Promise((res, rej) => {
// 执行复制命令并移除文本框
layer.msg("复制成功Http!", { icon: 1 });
document.execCommand('copy') ? res() : rej();
textArea.remove();
});
}
}

Js实现一键复制小功能的更多相关文章

  1. js实现一键复制

    方法一: 使用插件 引入clipboard.js 使用如下 <script> copyFn = function() { var clipboard = new Clipboard('.c ...

  2. 微信小程序——长按复制、一键复制

    wxml: 订单号:<text selectable='true' bindlongtap='copy' >{{OrderModel.OrderNo}}</text><b ...

  3. 通过如何通过js实现复制粘贴功能

    在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...

  4. js小功能整理

    /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [检测是否含有的字符串] * @return ...

  5. 移动端无法复制:使用clipboard.js碰到的一个小问题

    移动端无法复制:使用clipboard.js碰到的一个小问题   直接看下面的代码:在移动端访问,点击,能正常复制. <html> <head> <meta http-e ...

  6. js实现点击按钮复制文本功能

    最近项目活动中用到复制文本功能,发现在chrome中之前的clipboard的demo失效了,查了下发现是因为版本升级导致的.最新用法如下: <!DOCTYPE html> <htm ...

  7. JS类小功能

    工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...

  8. js小功能记录

    个人日常中遇到的js小功能记录,方便查看. /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [ ...

  9. 一款给力的一键复制js插件-clipboard.js

    一款没有依赖的.给力的一键复制的JS插件   点我前往github 案例demo见下载包内demo文件夹. 这里晒出最常用的几种方式,以供不时之需. <!DOCTYPE html> < ...

随机推荐

  1. 搭建一个完整的K8S集群-------基于CentOS 8系统

    创建三个centos节点: 192.168.5.141 k8s-master 192.168.5.142 k8s-nnode1 192.168.5.143 k8s-nnode2 查看centos系统版 ...

  2. axios&spring前后端分离传参规范总结

    前后端分离开发的场景下,开发人员的工作内容更加专注与专业,但是也产生了一些额外的沟通成本.比如:本文中为大家说明的前后端参数传递与接受方法.本文主要是面对前端使用axios,后端使用Spring进行参 ...

  3. C#里如何简单的校验时间格式

    前言: 晚上打算睡觉的时候,群里反馈订单接收失败,开工排查问题,日志显示验签失败,发现一个蛮有意思的BUG,总算有了一个写作的素材 场景描述 本次的场景属于比较常见的收单API,对第三方的订单进行签名 ...

  4. google nexus5x 刷机抓包逆向环境配置(三)

    本文仅供学习交流使用,如侵立删! google nexus5x 刷机抓包逆向环境配置(三) 安装抓包证书(Fiddler.Charles) 操作环境 nexus5x kaliLinux win10 准 ...

  5. 一文搞懂│mysql 中的备份恢复、分区分表、主从复制、读写分离

    目录 mysql 的备份和恢复 mysql 的分区分表 mysql 的主从复制读写分离 mysql 的备份和恢复 创建备份管理员 创建备份管理员,并授予管理员相应的权限 备份所需权限:select,r ...

  6. CF1368G Shifting Dominoes (线段树)

    题面 有一个 n × m n\times m n×m 的棋盘,被 1 × 2 1\times 2 1×2 的骨牌覆盖,保证 2 ∣ n × m 2|n\times m 2∣n×m. 现在你需要执行以下 ...

  7. OpenJudge 1.5.15 银行利息

    15:银行利息 总时间限制: 1000ms 内存限制: 65536kB 描述 农夫约翰在去年赚了一大笔钱!他想要把这些钱用于投资,并对自己能得到多少收益感到好奇.已知投资的复合年利率为R(0到20之间 ...

  8. Html飞机大战(二):面向对象绘制背景

    好家伙, 我们为了后续工作的顺利进行,我试着把每一个模块封装为对象 但冻手之前还是要构思一下 我们把天空封装成一个类: 1.来搞一手简单的对象分析:  属性方面的都好理解 来说明一下方法: (1) p ...

  9. 第四十篇:Vue的生命周期(一)

    好家伙,军训结束了,回归 Vue实例的生命周期 1.什么是生命周期? 从Vue实例创建,运行到销毁期间总是伴随着各种各样的事件,这些事件,统称为生命周期. 2.什么是生命周期钩子? 生命周期函数的别称 ...

  10. Ubuntu locale设置

    /bin/bash: warning: setlocale: LC_ALL: cannot change locale (en_US.UTF-8) 解决方法: 1 sudo locale-gen &q ...