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 相关文章推荐
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 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
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
React组件refs的使用详解
2018/02/09 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python Flask基础教程示例代码
2018/02/07 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
Pytorch to(device)用法
2020/01/08 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
如何开发安全的AJAX应用
2014/03/26 面试题
个人作风剖析材料
2014/02/02 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
防灾减灾活动总结
2014/08/30 职场文书
法定代表人资格证明书
2014/09/11 职场文书
会议新闻稿
2015/07/17 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
matlab xlabel位置的设置方式
2021/05/21 Python
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers