封装剪贴板:

    function Copy(str) {
var save = function (e) {
//设置需要复制模板的内容
e.clipboardData.setData('text/plain',str);
//阻止默认行为
e.preventDefault();
}
// h5监听copy事件,调用save函数保存到模板中
document.addEventListener('copy',save);
// 调用右键复制功能
document.execCommand('copy');
//移除copy事件
document.removeEventListener('copy',save);
alert("复制成功");
}

点击调用函数

 $('.CopeBorder').on('click',function () {
var CopeBorder=$(".CopeText").text();
// console.log(typeof CopeBorder)
Copy(CopeBorder);
})

js 实用封装 点击按钮复制到剪贴板的更多相关文章

  1. js 实现页面点击按钮复制内容

    前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...

  2. jquery点击按钮复制内容

    做移动端的项目遇到一个需求要点击按钮复制dom里的内容,看了很多资料显示必须textarea或者input里的内容才能简单复制,还有就是用插件的了,最终都因为遇到各种问题放弃,最终选择了最简单的点击复 ...

  3. 原生 js 实现点击按钮复制文本

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...

  4. 使用JS代码实现点击按钮下载文件

    有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...

  5. CSS3和js炫酷点击按钮3D翻转动画特效

    简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览   源码下载 ...

  6. iOS中点击按钮复制指定内容

    话不多说,直接上图和代码:

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

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

  8. JS实现PC、Android、IOS端的点击按钮复制内容功能

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. JS复制文本到粘贴板,前端H5移动端点击按钮复制文本

    <span id="codeNum">FTYHDSDW</span> <span class=" code-btn" id=&qu ...

随机推荐

  1. VC2008中如何为MFC应用程序添加和删除消息响应函数

    最近重温<MFC Windows应用程序设计>第二版这本书,里面的代码全部是使用VC6.0写的,我Win7下安装的是VS2008开发环境. VC2008下添加和删除常见的消息响应函数有两种 ...

  2. Spring Enable高级应用及原理

    Enable* 之前的文章用到了一些Enable*开头的注解,比如EnableAsync.EnableScheduling.EnableAspectJAutoProxy.EnableCaching等, ...

  3. linux 下安装chrome的rpm包

    1. 下载chrome的rpm包,假设叫cho. 2.执行命令 rpm -ivh cho 3.报错提示需要lsb>=4.0,执行命令 yum install lsb 等待安装完毕. 4. 重新执 ...

  4. 遇到的css问题

    1.上下两个div高度重叠:原因是上面的div中存在浮动,且没有设置高度,解决方案:外面再套一个div,设置高度或overflow:hidden 2.上下两个div存在间隙:原因是有div的displ ...

  5. KiCAD批量修改丝印大小

    KiCAD批量修改丝印大小 1.编辑->编辑文本与图片属性 2.范围 选择封装参考,活动 首选选择 “设定为指定值”,然后选择要修改的层,输入想要修改的参数 注意:文本高度与文本宽度比例要适中, ...

  6. Lenovo E42-80安装Linux的注意事项

    Lenovo E42-80安装Linux的注意事项 https://www.cnblogs.com/dylanchu/p/9750760.html 1. 用U盘做个liveCD While makin ...

  7. 【Luogu】【关卡1-8】BOSS战-入门综合练习2(2017年10月)【AK】------都是基础题

    P1426 小鱼会有危险吗 我个人觉得这个题目出的不好,没说明白,就先只粘贴的AC代码吧 #include <bits/stdc++.h> using namespace std; int ...

  8. C# 利用发射动态创建泛型类型的对象,泛型类型支持带惨的构造函数

    static class Program { static void Main(string[] args) { var aaa = Create<AAA>("aaa" ...

  9. rem_2

    html{ font-size:625%; } body{ font-size:0.16rem; }

  10. microservice-cloud-03-provider-product-8001

    server:  port: 8001 mybatis:  config-location: classpath:mybatis/mybatis.cfg.xml        # mybatis配置文 ...