js 实现页面点击按钮复制内容
前言:
我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用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 实现页面点击按钮复制内容的更多相关文章
- jquery点击按钮复制内容
做移动端的项目遇到一个需求要点击按钮复制dom里的内容,看了很多资料显示必须textarea或者input里的内容才能简单复制,还有就是用插件的了,最终都因为遇到各种问题放弃,最终选择了最简单的点击复 ...
- js点击按钮复制内容到粘贴板
复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...
- JS实现PC、Android、IOS端的点击按钮复制内容功能
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- vue中点击按钮复制内容
<el-button type="primary" round size="mini" @click="copyUrl">复制u ...
- js 实用封装 点击按钮复制到剪贴板
封装剪贴板: function Copy(str) { var save = function (e) { //设置需要复制模板的内容 e.clipboardData.setData('text/pl ...
- 页面点击按钮下载excel(原生js)
let els = document.getElementsByTagName('iframe'); if(els.length > 0){ for(let i = 0;i < els.l ...
- 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选
页面点击按钮添加一行 删除一行 全选 反选 全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...
- js当前页面刷新并且清空文本内容的方法
js当前页面刷新并且清空文本内容的方法: 1.js代码:location.reload(); 2.html:<body onload="document.forms[0].reset( ...
- 原生 js 实现点击按钮复制文本
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
随机推荐
- What Is HLS (HTTP Live Streaming)?
HTTP Live Streaming (HLS) Executive Summary HTTP Live Streaming (or HLS) is an adaptive streaming c ...
- 类、闭包、monand
类.闭包.monand 三者的相同点都是封装了数据与操作. 类:定义数据类型,倾向于数据的抽象:集合数据为操作提供上下文. 闭包:对环境变量和操作的封装抽象.操作基于环境变量,核心问题是环境变量的管理 ...
- centos lnmp一键安装
安装 系统需求: 需要2 GB硬盘剩余空间 128M以上内存,OpenVZ的建议192MB以上(小内存请勿使用64位系统) Linux下区分大小写,输入命令时请注意! 安装步骤: 1.使用putty或 ...
- webbrowser实现一个进程一个代理的办法
public static void RefreshIESettings(string strProxy) { const int INTERNET_OPTION_PROXY = 38; const ...
- HTML+CSS+JS综合练习(动态验证版)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript入门(一)
JavaScript入门篇—开篇 Document对象 1Document对象表示当前页面,HTML在浏览器中是以DOM形式表示为树形结构.Document是DOM树的根节点.(因此需要查找DOM树中 ...
- Java IO---字节流和字符流
一.IO流简介 流 流是一个抽象概念,Java程序和外部设备(可以是硬盘上的文件,也可以是网络设备)之间的输入输出操作是基于流的. 流就好比水管中的水流,具有流入和流出,类比数据的输入和输出. Jav ...
- Lumen 使用事件需要注意的事项
Lumen 版本 5.2 参考手册 laravel event 需要注意的事项 如果是第一次在lumen下使用事件,需要修改bootstrap\app.php文件 添加对EventServicePro ...
- 使用node写爬虫入门
最近看了node能做爬虫,所以就试了一下,一下是整个过程的记录 1.新建文件夹baidunews 2.在上边新建的文件夹下输入npm init进行初始化 3.初始化完成后下载需要的依赖包 npm in ...
- Golang: 并发抓取网页内容
在上一篇中,我们根据命令行的 URL 参数输入,抓取对应的网页内容并保存到本地磁盘,今天来记录一下如何利用并发,来抓取多个站点的网页内容. 首先,我们在上一次代码的基础上稍作改造,使它能够获取多个站点 ...