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 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
iframe实用操作锦集
Apr 22 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 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 方便水印和缩略图的图形类
2009/05/21 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
调试Python程序代码的几种方法总结
2015/04/28 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
群胜软件Java笔试题
2012/09/29 面试题
集团薪酬管理制度
2014/01/13 职场文书
求职意向书范文
2014/04/01 职场文书
军训个人总结
2015/03/03 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
如何写新闻稿
2015/07/18 职场文书
学习雷锋主题班会
2015/08/14 职场文书
python lambda 表达式形式分析
2022/04/03 Python