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面向对象之Javascript 继承
May 04 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
React如何创建组件
Jun 27 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中显示格式化的用户输入
2006/10/09 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
php实现网页端验证码功能
2017/07/11 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
jQuery 表格工具集
2010/04/25 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
应届生高等护理求职信
2013/10/12 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
校园安全教育广播稿
2014/02/17 职场文书
企业承诺书格式
2014/05/21 职场文书
超市周年庆活动方案
2014/08/16 职场文书
运动会通讯稿600字
2015/07/20 职场文书
React四级菜单的实现
2022/04/08 Javascript