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自动显示最后更新时间
Mar 15 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
js 走马灯简单实例
Nov 21 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
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
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
js原生实现FastClick事件的实例
2016/11/20 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
python实现低通滤波器代码
2020/02/26 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
职业生涯规划怎么写
2013/12/29 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
清洁工个人工作总结
2015/03/05 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
新手初学Java List 接口
2021/07/07 Java/Android