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调用XML制作连动下拉列表框
Jun 25 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 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.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
多广告投放代码 推荐
2006/11/13 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
window.onload使用指南
2015/09/13 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
Django中使用Celery的教程详解
2018/08/24 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
美国性感内衣店:Yandy
2018/06/12 全球购物
幼儿园亲子活动方案
2014/01/29 职场文书
阿德的梦教学反思
2014/02/06 职场文书
运动会稿件200字
2014/02/07 职场文书
临时用工协议书范本
2014/10/29 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
班主任经验交流材料
2014/12/16 职场文书
校长新学期致辞
2015/07/30 职场文书
股东出资协议书
2016/03/21 职场文书
新员工入职感言范文!
2019/07/04 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
SQL Server中搜索特定的对象
2022/05/25 SQL Server
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang
html中两种获取标签内的值的方法
2022/06/16 jQuery