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 相关文章推荐
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 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
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
JS 文件大小判断的实现代码
2010/04/07 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
node.js通过url读取文件
2020/10/16 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
SQL面试题
2013/04/30 面试题
冰淇淋店创业计划书范文
2013/12/27 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
总账会计岗位职责
2015/04/02 职场文书
转正申请报告格式
2015/05/15 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android