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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

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