原生js实现点击按钮复制内容到剪切板


Posted in Javascript onNovember 19, 2020

本文实例为大家分享了js点击按钮复制内容到剪切板的具体代码,供大家参考,具体内容如下

效果图

原生js实现点击按钮复制内容到剪切板

上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .divBox {
    width: 500px;
    margin: 100px auto;
    display: flex;
  }

  .popupStyle {
    display: none;
    width: 160px;
    background-color: rgb(85, 85, 85);
    color: aqua;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: fixed;
    z-index: 1;
    top: 2%;
    left: 50%;
    margin-left: -80px;
  }
</style>
<body>
  <div class="divBox">
    <div id="div">这是要复制的div内容</div>
    <a href="#" onclick="handleDivCopy()">点击复制</a>
  </div>
  <div class="divBox">
    <textarea id="textarea">Hello,World</textarea>
    <a href="#" onclick="handleCopy()">点击复制</a>
  </div>
  <script>
    
    // 复制 div 内容
    function handleDivCopy() {
      const div = document.getElementById("div");
      const input = document.createElement("input");
      document.body.appendChild(input);
      input.value = div.innerText;
      input.select();
      
      try {
        if (document.execCommand("copy", false)) {
          handleDomMsg("div 内容复制成功");
        } else {
          handleDomMsg("div 内容复制失败");
        }
      } catch (error) {
        console.log(error, "error")
      } finally {
        input.remove();
      }
    };
    
    // 复制输入框内容
    function handleCopy() {
      const textarea = document.getElementById("textarea");
      textarea.select();
      try {
        if (document.execCommand("copy", false)) {
          handleDomMsg("输入框内容复制成功");
        } else {
          handleDomMsg("输入框内容复制失败");
        }
      } catch (error) {
        console.log(error, "error")
      }
    };


    // DOM 弹窗
    function handleDomMsg(message) {
      const div = document.createElement("div");
      document.body.appendChild(div);
      div.innerHTML = message || "this is a Message";
      div.className = "popupStyle";
      div.style.display = "block";

      setTimeout(() => {
        div.remove();
      }, 1000);
    }

  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的缓存机制浅析
Jun 07 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
vue路由教程之静态路由
Sep 03 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
jQuery-App输入框实现实时搜索
Nov 19 #jQuery
elementUI同一页面展示多个Dialog的实现
Nov 19 #Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 #Javascript
深入了解Vue3模板编译原理
Nov 19 #Vue.js
微信小程序实现倒计时功能
Nov 19 #Javascript
微信小程序实现列表左右滑动
Nov 19 #Javascript
详解JavaScript 中的批处理和缓存
Nov 19 #Javascript
You might like
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
PHP实现的日历功能示例
2018/09/01 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
python创建子类的方法分析
2019/11/28 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
清明节演讲稿
2014/05/27 职场文书
物流管理专业推荐信
2014/09/06 职场文书
台风停课通知
2015/04/24 职场文书
全国助残日活动总结
2015/05/11 职场文书
同意报考证明
2015/06/17 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
redis 查看所有的key方式
2021/05/07 Redis
Python 数据科学 Matplotlib图库详解
2021/07/07 Python