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 相关文章推荐
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
js生成word中图片处理方法
Jan 06 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
js实现碰撞检测
Jan 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实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
php实现微信公众号无限群发
2015/10/11 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
让您的菜单不离网站
2006/10/03 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
优秀毕业生自我鉴定
2014/01/19 职场文书
借款协议书
2014/09/16 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
先进单位申报材料
2014/12/25 职场文书
检讨书格式
2015/01/23 职场文书
安全保证书格式
2015/02/28 职场文书
房贷收入证明范本
2015/06/12 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书