封装剪贴板:

    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. Django框架(三十)—— 使用Vue搭建前台

    目录 vue的使用 一.创建vue项目 二.pycharm开发vue项目 1.安装vue.js插件 2.运行vue项目 三.vue项目的目录结构 四.vue的使用 1.创建新的组件 2.显示数据 3. ...

  2. 最新版本IntelliJ IDEA 2019.3 (Ultimate Edition) 激活及汉化

    附:官网idea下载地址 以下有两种破解方式,推荐方式二: =============================破解方式1==================================== ...

  3. 面向对象&从这里开始我们将不再是纯小白

    一.面向对象初识 1.1 面向过程编程vs函数式编程 我们在没有学习函数的时候,写的代码都是面向过程式编程 # 面向过程编程 测量对象的元素的个数. s1 = 'fjdsklafsjda' count ...

  4. vue在element-ui的dialog弹出框中加入百度地图

    参考:https://blog.csdn.net/u012724595/article/details/82703579 <!-- gps弹窗 --> <el-dialog v-di ...

  5. 在AndroidStudio2.3.2下JNI开发的详细步骤(转)

    转自:http://blog.csdn.net/luhaoying1111/article/details/72468867 安装NDK 在工具栏点击File->Settings->App ...

  6. python_django_类视图的第一次忐忑碰触!!!

    我们Django学到这里,基础知识阶段是已经完成了!! 在我们前面接触到的视图都是基于函数的视图函数我们可以称它为FBV,而今天我们新接触的就是视图函数的另一类CBV:基于类的视图函数,我们这里拓展这 ...

  7. uva658 dijkstra+状态压缩

    题目大意: 假定有n个潜在的bug和m个补丁,每个补丁用长为n的字符串表示.首先输入bug数目以及补丁数目.然后就是对m 个补丁的描述,共有m行.每行首先是一个整数,表明打该补丁所需要的时间.然后是两 ...

  8. hive之基本架构

    什么是Hive hive是建立在Hadoop体系架构上的一层SQL抽象,使得数据相关人员是用他们最为熟悉的SQL语言就可以进行海量的数据的处理.分析和统计工作,而不是必须掌握JAVA等变成语言和具备开 ...

  9. 手机号码格式验证和 FASTDFS 工具类

    常见大陆和香港号码格式验证 import java.util.regex.Matcher; import java.util.regex.Pattern; import java.util.regex ...

  10. Mysql学习笔记(004)- 条件查询

    条件查询 #进阶2:条件查询 /* 语法: select 查询列表③ from 表名① where 条件筛选② 分类: 一.按条件表达式筛选 条件运算符:> < = != <> ...