前言:

我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法:

实现步骤:

1、引入相关的js(ClipboardJS插件)

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<script type="text/javascript" src="https://lib.baomitu.com/clipboard.js/1.6.1/clipboard.min.js"></script>

2、html布局

<p class="state" id="mykeyPassword"> 这里是需要复制的内容 </p>
<span class="copyWord" id="copyButton" data-clipboard-action="copy" data-clipboard-target="#mykeyPassword" style="cursor: pointer" onclick=""> 点击复制内容 </span>

注意:点击按钮的data-clipboard-target 属性值一定要与被复制标签的id保持一致

3、js的具体实现

var clipboard = new ClipboardJS('#copyButton');
clipboard.on('success', function (e) {
//复制成功
});
clipboard.on('error', function (e) {
console.log("复制失败,请重试");
});
备注:这里默认监听点击复制事件

注意:

1、需要给span 加上cursor:pointer 这个属性,否则在ios13以下的系统无法实现复制效果!

2、同时加上onclick='' ''

js 实现页面点击按钮复制内容的更多相关文章

  1. jquery点击按钮复制内容

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

  2. js点击按钮复制内容到粘贴板

    复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...

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

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

  4. vue中点击按钮复制内容

    <el-button type="primary" round size="mini" @click="copyUrl">复制u ...

  5. js 实用封装 点击按钮复制到剪贴板

    封装剪贴板: function Copy(str) { var save = function (e) { //设置需要复制模板的内容 e.clipboardData.setData('text/pl ...

  6. 页面点击按钮下载excel(原生js)

    let els = document.getElementsByTagName('iframe'); if(els.length > 0){ for(let i = 0;i < els.l ...

  7. 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

    页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...

  8. js当前页面刷新并且清空文本内容的方法

    js当前页面刷新并且清空文本内容的方法: 1.js代码:location.reload(); 2.html:<body onload="document.forms[0].reset( ...

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

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

随机推荐

  1. What Is HLS (HTTP Live Streaming)?

    HTTP Live Streaming  (HLS) Executive Summary HTTP Live Streaming (or HLS) is an adaptive streaming c ...

  2. 类、闭包、monand

    类.闭包.monand 三者的相同点都是封装了数据与操作. 类:定义数据类型,倾向于数据的抽象:集合数据为操作提供上下文. 闭包:对环境变量和操作的封装抽象.操作基于环境变量,核心问题是环境变量的管理 ...

  3. centos lnmp一键安装

    安装 系统需求: 需要2 GB硬盘剩余空间 128M以上内存,OpenVZ的建议192MB以上(小内存请勿使用64位系统) Linux下区分大小写,输入命令时请注意! 安装步骤: 1.使用putty或 ...

  4. webbrowser实现一个进程一个代理的办法

    public static void RefreshIESettings(string strProxy) { const int INTERNET_OPTION_PROXY = 38; const ...

  5. HTML+CSS+JS综合练习(动态验证版)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. JavaScript入门(一)

    JavaScript入门篇—开篇 Document对象 1Document对象表示当前页面,HTML在浏览器中是以DOM形式表示为树形结构.Document是DOM树的根节点.(因此需要查找DOM树中 ...

  7. Java IO---字节流和字符流

    一.IO流简介 流 流是一个抽象概念,Java程序和外部设备(可以是硬盘上的文件,也可以是网络设备)之间的输入输出操作是基于流的. 流就好比水管中的水流,具有流入和流出,类比数据的输入和输出. Jav ...

  8. Lumen 使用事件需要注意的事项

    Lumen 版本 5.2 参考手册 laravel event 需要注意的事项 如果是第一次在lumen下使用事件,需要修改bootstrap\app.php文件 添加对EventServicePro ...

  9. 使用node写爬虫入门

    最近看了node能做爬虫,所以就试了一下,一下是整个过程的记录 1.新建文件夹baidunews 2.在上边新建的文件夹下输入npm init进行初始化 3.初始化完成后下载需要的依赖包 npm in ...

  10. Golang: 并发抓取网页内容

    在上一篇中,我们根据命令行的 URL 参数输入,抓取对应的网页内容并保存到本地磁盘,今天来记录一下如何利用并发,来抓取多个站点的网页内容. 首先,我们在上一次代码的基础上稍作改造,使它能够获取多个站点 ...