封装剪贴板:

    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. Java继承和构造函数

    构造函数不是类的成员,它们不是由子类继承的.它们用于初始化实例变量. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 class CSuper {   public ...

  2. JS轻松实现单击文本框弹出选择日期

    我的开发工具是vs2005,你们可选择自己合适的开发工具 首先创建个文本框<input id="txFDate" name="txFDate" type= ...

  3. Windows10下运行Android Studio3.3时关于AMD处理器不支持Intel硬件加速的解决办法

    我的电脑是Thinkpad E485系列,CPU是AMD Ryzen 5 2500U,电脑预装系统是Windows10 X64家庭版,如下图所示: 下载安装了Android Studio3.3,创建了 ...

  4. 在已有QT项目中添加多个UI布局界面

    1.在工程中右键->添加新文件,按图选择 2.选择窗口部件 3.创建UI控制类 注意上图红框中命名按实际需要定义,否则后期改动要修改UI文件参数 4.修改UI文件,框1是窗口部件父类,框2是UI ...

  5. vue 点击切换图标

    <div @click="showImg" class="showSearch"> <img class="header_img&q ...

  6. 网络基础之TCP/IP协议族

    一.TCP/IP协议族 1.什么是协议? 计算机与网络设备相互通信依赖于相同的方法,比如,双方通信基于何种语言等.而把通信所依赖的这一切方法统称为规则,而我们就把这种规则称为协议. 协议中存在各种各样 ...

  7. pygame游戏框架

    #_author:来童星#date:2019/12/22 import pygame import sys pygame.init() size=width,height=640,480 screen ...

  8. Boost Download

    { //https://www.boost.org/users/history/version_1_71_0.html }

  9. GERALD07加强版题解

    题目描述: N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. 输入格式: 第一行四个整数N.M.K.type,代表点数.边数.询问数以及询问是否加密. 接下来M行,代表图 ...

  10. NOIP模拟测试17

    T1:入阵曲 题目大意:给定一个N*M的矩形,问一共有多少个子矩形,使得矩形内所有书的和为k的倍数. 60%:N,M<=80 枚举矩形的左上角和右下角,用二维前缀和求出数字之和. 时间复杂度$O ...