JavaScript实现一键复制内容剪贴板


Posted in Javascript onJuly 23, 2022

引言

有时候为了方便用户快速复制页面的内容,一般的做法就是添加一个按钮给用户点击一下就复制下来了,这边使用JavaScript原生的方法进行设置剪贴板。

代码

copy.html

<!DOCTYPE html>
<html>
<head>
    <title>一键复制demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        h2{
            text-align: center;
            margin-top: 20px;
        }
        #neirong{
            width: calc(90% - 20px);
            padding:10px 10px;
            margin:20px auto;
            background: #eee;
            border-radius: 5px;
        }
        #copy{
            border:none;
            width: 90%;
            height: 45px;
            background: #39f;
            font-size: 16px;
            color: #fff;
            font-weight: bold;
            border-radius: 5px;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
<h2>一键复制demo</h2>
<div id="neirong">这是内容这是内容这是内容这是内容</div>
<button id="copy">复制</button>

<script>
function copyArticle(event){
      const range = document.createRange();
      range.selectNode(document.getElementById('neirong'));
      const selection = window.getSelection();
      if(selection.rangeCount > 0) selection.removeAllRanges();
      selection.addRange(range);
      document.execCommand('copy');
      alert("复制成功");
}

window.onload = function () {
  var obt = document.getElementById("copy");
  obt.addEventListener('click', copyArticle, false);
}
</script>
</body>
</html>

实现效果

JavaScript实现一键复制内容剪贴板

以上就是JavaScript实现一键复制内容剪切板的详细内容,更多关于JavaScript一键复制内容的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
从原生JavaScript到React深入理解
Jul 23 #Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 #Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 #Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 #Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 #Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 #Javascript
vue递归实现树形组件
Jul 15 #Vue.js
You might like
php 随机生成10位字符代码
2009/03/26 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
python画一个玫瑰和一个爱心
2020/08/18 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Django model update的多种用法介绍
2020/03/28 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
应用服务器有那些
2012/01/19 面试题
调解员先进事迹材料
2014/02/07 职场文书
学期评语大全
2014/04/30 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
迎国庆横幅标语
2014/10/08 职场文书
实习证明格式范文
2014/10/14 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书