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 相关文章推荐
js 通用javascript函数库整理
Aug 14 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
Javascript中神奇的this
Jan 20 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
原生js实现日期选择插件
May 21 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 Javascript
使用Ajax实现进度条的绘制
Apr 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
用户的详细注册和判断
2006/10/09 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
JS定时器实例
2013/04/17 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
为什么说python更适合树莓派编程
2020/07/20 Python
使用Python pip怎么升级pip
2020/08/11 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
学校门卫管理制度
2014/01/30 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
小学班级口号
2014/06/09 职场文书
护理学专业求职信
2014/06/29 职场文书
于丹论语心得观后感
2015/06/15 职场文书
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
Python语言内置数据类型
2022/02/24 Python