主页 / 网络编程 /

js+html5实现复制文字按钮

网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要为大家详细介绍了js+html5实现复制文字按钮，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js+html5实现点击复制文字的按钮，供大家参考，具体内容如下

图片展示

注意css中的样式，有些页面复制不成功就是没有添加那一句造成的。

代码块

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>

  <style type="text/css">
    {
      -webkit-user-select: auto;
    }
  </style>

  <body>
    <span id="content">
      你好，好久不见！
    </span>
    <button id="copyBT">复制</button>
    <script>
      function copyArticle(event) {
        const range = document.createRange();
        range.selectNode(document.getElementById('content'));

        const selection = window.getSelection();
        if(selection.rangeCount > 0) selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
        alert("复制成功！");
      }

      document.getElementById('copyBT').addEventListener('click', copyArticle, false);
    </script>
  </body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：jQuery开源组件BootstrapValidator使用详解 下一篇：js+html5实现页面可刷新的倒计时效果

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by