编程 Javascript

js+html5实现复制文字按钮

Posted in Javascript onJuly 15, 2017

本文实例为大家分享了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+html5实现复制文字按钮

- Author -

ouqi_qiou

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery写的日历(包括日历的样式及功能)

Apr 23 Javascript

IE下window.onresize 多次调用与死循环bug处理方法介绍

Nov 12 Javascript

浅析js中substring和substr的方法

Nov 09 Javascript

深入学习AngularJS中数据的双向绑定机制

Mar 04 Javascript

jQuery simpleModal插件的使用介绍

Aug 30 Javascript

AngularGauge 属性解析详解

Sep 06 Javascript

js获取腾讯视频ID的方法

Oct 03 Javascript

微信小程序常见问题总结（4058，40013）及解决办法

Jan 11 Javascript

Node.js环境下Koa2添加travis ci持续集成工具的方法

Jun 19 Javascript

ionic环境配置及问题详解

Jun 27 Javascript

Vue实现双向绑定的原理以及响应式数据的方法

Jul 02 Javascript

JavaScript函数柯里化

Nov 07 Javascript

js+html5实现页面可刷新的倒计时效果

Jul 15 #Javascript

详解ES6之用let声明变量以及let loop机制

Jul 15 #Javascript

vue增删改查的简单操作

Jul 15 #Javascript

JavaScript实现跟随滚动缓冲运动广告框

Jul 15 #Javascript

Javascript实现基本运算器

Jul 15 #Javascript

基于AngularJS的拖拽文件上传的实例代码

Jul 15 #Javascript

Javascript实现时间倒计时效果

Jul 15 #Javascript

You might like

php四种基础算法代码实例

2013/10/29 PHP

php实现字符串首字母大写和单词首字母大写的方法

2015/03/14 PHP

PHP的APC模块实现上传进度条

2015/10/27 PHP

详谈php ip2long 出现负数的原因及解决方法

2017/04/05 PHP

PHP实现验证码校验功能

2017/11/16 PHP

ThinkPHP5.1表单令牌Token失效问题的解决

2019/03/22 PHP

php libevent 功能与使用方法详解

2020/03/04 PHP

jquery中实现简单的tabs插件功能的代码

2011/03/02 Javascript

JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))

2012/07/17 Javascript

JS打开新窗口防止被浏览器阻止的方法

2015/01/03 Javascript

PHP实现的各种中文编码转换类分享

2015/01/23 Javascript

jfreechart插件将数据展示成饼状图、柱状图和折线图

2015/04/13 Javascript

使用JavaScript实现连续滚动字幕效果的方法

2015/07/07 Javascript

javascript实现手机震动API代码

2015/08/05 Javascript

通过设置CSS中的position属性来固定层的位置

2015/12/14 Javascript

jQuery UI库中dialog对话框功能使用全解析

2016/04/23 Javascript

javascript Promise简单学习使用方法小结

2016/05/17 Javascript

jQuery获取table行数并输出单元格内容的实现方法

2016/06/30 Javascript

angular.js指令中的controller、compile与link函数的不同之处

2017/05/10 Javascript

bootstrap fileinput实现文件上传功能

2017/08/23 Javascript

JavaScript读取本地文件常用方法流程解析

2020/10/12 Javascript

python实现随机密码字典生成器示例

2014/04/09 Python

Python中实现三目运算的方法

2015/06/21 Python

Django原生sql也能使用Paginator分页的示例代码

2017/11/15 Python

用Python删除本地目录下某一时间点之前创建的所有文件的实例

2017/12/14 Python

python ipset管理增删白名单的方法

2019/01/14 Python

Python用5行代码实现批量抠图的示例代码

2020/04/14 Python

Python判断字符串是否为合法标示符操作

2020/09/03 Python

Flask-SocketIO服务端安装及使用代码示例

2020/11/26 Python

Sephora丝芙兰泰国官方网站：国际知名化妆品购物

2017/11/15 全球购物

如何开发安全的AJAX应用

2014/03/26 面试题

检察官就职演讲稿

2014/01/13 职场文书

篮球比赛口号

2014/06/10 职场文书

借款协议书

2014/09/16 职场文书

群众路线党员个人整改措施

2014/10/27 职场文书

DjangoRestFramework 使用 simpleJWT 登陆认证完整记录

2021/06/22 Python