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 相关文章推荐
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
vue环境搭建简单教程
Nov 07 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 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
关于手调机和数调机的选择
2021/03/02 无线电
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
详解React 元素渲染
2020/07/07 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
python gdal安装与简单使用
2019/08/01 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
python 实现多维数组转向量
2019/11/30 Python
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
最新创业融资计划书
2014/01/19 职场文书
食品安全检查制度
2014/02/03 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
小学生植树节活动总结
2014/07/04 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
小鞋子观后感
2015/06/05 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL