脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → html5复制文字按钮

js+html5实现复制文字按钮

 更新时间：2017年07月15日 15:18:07   作者：ouqi_qiou  
这篇文章主要为大家详细介绍了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>

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

您可能感兴趣的文章:

相关文章

  • JS解密入门之凭直觉解

    JS解密入门之凭直觉解

    什么叫直觉解？根据目前流行的免杀方法，有这么几种初级加密方法。进制加密，URLEncode加密，加花
    2008-06-06
  • Bootstrap入门书籍之（零）Bootstrap简介

    Bootstrap入门书籍之（零）Bootstrap简介

    Bootstrap是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文给大家介绍Bootstrap入门书籍之（零）Bootstrap简介，需要的朋友参考下
    2016-02-02
  • JavaScript 中字符串和数组的概念解析与多角度对比区分

    JavaScript 中字符串和数组的概念解析与多角度对比区分

    JavaScript中的字符串和数组是两种重要的数据结构,各有特点和应用场景,字符串主要用于文本处理,是不可变的；数组用于存储有序集合,是可变的,理解它们的区别和应用场景,有助于编写更高效和易维护的代码,感兴趣的朋友跟随小编一起看看吧
    2024-11-11
  • 原生js实现autocomplete插件

    原生js实现autocomplete插件

    这篇文章主要介绍了原生js实现autocomplete插件的相关资料,需要的朋友可以参考下
    2016-04-04
  • 腾讯的ip接口 方便获取当前用户的ip地理位置

    腾讯的ip接口 方便获取当前用户的ip地理位置

    在论坛中闲逛，无意中发现腾讯的ip接口。还是挺有意思的。大家可以利用下，这个IP接口所查询到的还是比较准确，我发给几个朋友测试了一下都是正确的，毕竟是腾讯的东西。
    2010-11-11
  • JavaScript正则表达式的贪婪匹配和非贪婪匹配

    JavaScript正则表达式的贪婪匹配和非贪婪匹配

    所谓贪婪匹配就是匹配重复字符是尽可能多的匹配，非贪婪匹配就是尽可能少的匹配，下面通过一个例子给大家分享JavaScript正则表达式的贪婪匹配和非贪婪匹配，感兴趣的朋友参考下吧
    2017-09-09
  • JavaScript定时器设置、使用与倒计时案例详解

    JavaScript定时器设置、使用与倒计时案例详解

    这篇文章主要介绍了JavaScript定时器设置、使用与倒计时案例,详细分析了javascript定时器的设置、取消、循环调用并附带一个倒计时功能应用案例,需要的朋友可以参考下
    2019-07-07
  • JS面向对象编程基础篇（二） 封装操作实例详解

    JS面向对象编程基础篇（二） 封装操作实例详解

    这篇文章主要介绍了JS面向对象编程封装操作,结合实例形式详细分析了JS面向对象封装操作的相关概念、原理、使用方法与操作注意事项,需要的朋友可以参考下
    2020-03-03
  • JavaScript实现HTML5游戏断线自动重连的方法

    JavaScript实现HTML5游戏断线自动重连的方法

    这篇文章主要介绍了JavaScript实现HTML5游戏断线自动重连的方法,需要的朋友可以参考下
    2017-09-09
  • JavaScript数据库TaffyDB用法实例分析

    JavaScript数据库TaffyDB用法实例分析

    这篇文章主要介绍了JavaScript数据库TaffyDB用法,实例分析了TaffyDB数据库的定义、查询、更新、删除等操作的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07

最新评论