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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
浅析vue数据绑定
Jan 17 Javascript
jquery编写日期选择器
Mar 16 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
element实现合并单元格通用方法
Nov 13 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
mac下安装nginx和php
2013/11/04 PHP
php mail to 配置详解
2014/01/16 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
PHP异常处理浅析
2015/05/12 PHP
PHP可变函数学习小结
2015/11/29 PHP
chrome原生方法之数组
2011/11/30 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
python字符串排序方法
2014/08/29 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
python 为什么说eval要慎用
2019/03/26 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
Python如何在bool函数中取值
2020/09/21 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android