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 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
基于form-data请求格式详解
Oct 29 Javascript
JS实现横向跑马灯效果代码
Apr 20 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 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
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
js表数据排序 sort table data
2009/02/18 Javascript
小型js框架veryide.librar源代码
2009/03/05 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
python的数学算法函数及公式用法
2020/11/18 Python
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
向国旗敬礼学生寄语大全
2014/09/30 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
同学会演讲稿
2019/04/02 职场文书
新手初学Java网络编程
2021/07/07 Java/Android