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 相关文章推荐
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 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 中的批处理的实现
2007/06/14 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
AngularJs每天学习之总体介绍
2017/08/07 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
python数据结构之二叉树的建立实例
2014/04/29 Python
python实现进程间通信简单实例
2014/07/23 Python
python制作小说爬虫实录
2017/08/14 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
女儿十岁生日答谢词
2014/01/27 职场文书
小组合作学习反思
2014/02/18 职场文书
储备店长岗位职责
2015/04/14 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
十二生肖观后感
2015/06/12 职场文书
2019新员工心得体会
2019/06/25 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL