原生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 相关文章推荐
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
webpack file-loader和url-loader的区别
Jan 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
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
Python 支持向量机分类器的实现
2020/01/15 Python
python实现滑雪游戏
2020/02/22 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
python实现在线翻译
2020/06/18 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
大学生职业生涯规划方案
2014/01/03 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
大国崛起日本观后感
2015/06/02 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
Golang gRPC HTTP协议转换示例
2022/06/16 Golang