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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
JavaScript函数IIFE使用详解
Oct 21 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PDO::prepare讲解
2019/01/29 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
python线程池的实现实例
2013/11/18 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
vscode调试django项目的方法
2020/08/06 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
配置管理计划的主要内容有哪些
2014/06/20 面试题
审核会计岗位职责
2013/11/08 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
上海世博会口号
2014/06/19 职场文书
5s标语大全
2014/06/23 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
中小企业员工手册范本
2015/05/14 职场文书
百日宴上的祝酒词
2015/08/10 职场文书