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 相关文章推荐
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
三步实现ionic3点击退出app程序
Sep 17 Javascript
vue点击当前路由高亮小案例
Sep 26 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为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
10条php编程小技巧
2015/07/07 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
PHP7 新增常量
2021/03/09 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
python3序列化与反序列化用法实例
2015/05/26 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
python绘制漏斗图步骤详解
2019/03/04 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
Python 防止死锁的方法
2020/07/29 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
自我鉴定范文
2013/11/10 职场文书
数据管理员的自我评价分享
2013/11/15 职场文书
给客户的道歉信
2014/01/13 职场文书
个人公开承诺书
2014/03/28 职场文书
四议两公开实施方案
2014/03/28 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
工作求职自荐信
2014/06/13 职场文书
民间个人借款协议书
2014/09/30 职场文书
财产分割协议书范本
2014/11/03 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书