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 相关文章推荐
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
jQuery is()函数用法3例
May 06 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 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简单系统查询模块代码打包下载
2008/06/07 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
PHP安全性漫谈
2012/06/28 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
Python 通过pip安装Django详细介绍
2017/04/28 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
会计专业毕业生求职信分享
2014/01/03 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
推荐信怎么写
2014/05/09 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
社会实践活动报告
2015/02/05 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript