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实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 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的FTP学习(三)
2006/10/09 PHP
php的一个登录的类 [推荐]
2007/03/16 PHP
PHP 面向对象实现代码
2009/11/11 PHP
php中用数组的方法设置cookies
2011/04/21 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
JavaScript 10件让人费解的事情
2010/02/15 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
python数据类型_字符串常用操作(详解)
2017/05/30 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
python3字符串操作总结
2019/07/24 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
关于工资低的辞职信
2014/01/14 职场文书
安全生产活动月方案
2014/03/09 职场文书
效能监察建议书
2014/05/19 职场文书
新农村建设标语
2014/06/24 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript