原生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 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
ajax请求前端跨域问题原因及解决方案
Oct 16 Javascript
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 flush()与ob_flush()的区别详解
2013/06/03 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
JS支持带x身份证号码验证函数
2008/08/10 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
python中字典增加和删除使用方法
2020/09/30 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
后备干部培训方案
2014/05/22 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS