原生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 API学Jquery 之三 筛选
Apr 09 Javascript
js arguments对象应用介绍
Nov 28 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
javascript 实现 原路返回
Jan 21 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
js中的this的指向问题详解
Aug 29 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
js实现浏览器打印功能的示例代码
Jul 15 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
Grid得到选择行数据的方法总结
2011/01/17 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
python使用mailbox打印电子邮件的方法
2015/04/30 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
python实现简单五子棋游戏
2019/06/18 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python类的实例化问题解决
2019/08/31 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
QML实现钟表效果
2020/06/02 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
出售房屋协议书范本
2014/10/06 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
党员转正意见怎么写
2015/06/03 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
运动会广播稿50字
2015/08/19 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
Pillow图像处理库安装及使用
2022/04/12 Python
MySQL深分页问题解决思路
2022/12/24 MySQL