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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 创建一个复制UBB软件信息的链接或按钮的js代码

    <a href="java script:void(0)" onclick="copyinfo()">点击复制UBB标签</a> <input type="button" onclick="copyinfo()" value="点击复制UBB标签" /> <script language="javascript"> function cop

  • JavaScript实现点击按钮就复制当前网址

    点击按钮复制当前网址: 在大量的网站都有这样的功能,当点击一个按钮的时候可以复制当前页面的地址,以此可以方便网站用户对链接的存储,同时也便于网站的推广,下面就结合实例介绍一下如何实现此功能: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/&quo

  • JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)

    新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下 使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipboard.js/tree/master 引入插件:目录\clipboard.js-master\dist\clipboard.min.js 目录中有各种demo,分别实现了固定的文字复制,input的复制等等,可以看下找找思路: 下边来记录下使用的方式: 一:引入插件: <script src=&quo

  • JavaScript实现点击按钮复制指定区域文本(推荐)

    html5的webAPI接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能,不需要依赖flash. 代码如下: /* 创建range对象 */ const range = document.createRange(); range.selectNode(element); // 设定range包含的节点对象 /* 窗口的selection对象,表示用户选择的文本 */ const selection = window.getSelection(); if(selection.ra

  • 按钮JS复制文本框和表格的代码

    有了JS就方便了,点击一个按钮,拖黑复制自动搞定,然后CTRL+V就OK了! PHP.JS.AJALX学习中! 点击按钮,通过JS代码实现复制INPUT表单: 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> function copyinput() { var input=document.getElementById("inputid");//input的ID值 input.select(); //选择对象 docu

  • js+html5实现复制文字按钮

    js+html5实现复制文字按钮

    本文实例为大家分享了js+html5实现点击复制文字的按钮,供大家参考,具体内容如下 图片展示: 注意css中的样式,有些页面复制不成功就是没有添加那一句造成的. 代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style type=

  • 为网站代码块pre标签增加一个复制代码按钮代码

    为网站代码块pre标签增加一个复制代码按钮代码

    参考其他比较专业的博客系统,都在代码块上有一个复制代码的按钮.用来快速复制整个代码块的代码.于是我也想给我的博客增加一个这个功能. 注:chrome测试通过.其他浏览器未进行测试. 实现思路: 1.在页面加载完成之后,使用js给每个pre标签增加一个按钮"复制代码" 2.给按钮增加点击事件,点击事件的功能就是复制代码块的内容 实现代码: css部分,btn-pre-copy是pre标签中使用js增加的"复制代码"按钮.css的作用是让他显示在pre标签的右上角.这里

  • js实现点击后将文字或图片复制到剪贴板的方法

    本文实例讲述了js实现点击后将文字或图片复制到剪贴板的方法,代码非常简洁实用,具体功能代码如下所示: 实现复制文字代码: <table width="99%" border="0" cellpadding="0" cellspacing="0" class="firtable"> <tr> <th width="100%" style="color

  • JS简单实现点击按钮或文字显示遮罩层的方法

    JS简单实现点击按钮或文字显示遮罩层的方法

    本文实例讲述了JS简单实现点击按钮或文字显示遮罩层的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>点击文字弹出一个DIV层窗口代码</title> <meta charset="urf-8"/> &l

  • JS实现移动端点击按钮复制文本内容

    移动端点击按钮复制文本内容,具体内容如下所示: <div> <p>邀请码</p> // <p id="inviteCode" class="inviteCode">{{invite_code}}</p> <input id="inviteCode" class="inviteCode" type="text" /> <p clas

  • JS+HTML5实现获取手机验证码倒计时按钮

    JS+HTML5实现获取手机验证码倒计时按钮

    效果图如下所示: HTML: <input type="button" value="获取验证码"> CSS: input[type=button] width: 150px; height: 30px; background-color: #ff3000; border: 0; border-radius: 15px; color: #fff; } input[type=button].on { background-color: #eee; colo

  • 使用clipboard.js库实现复制剪切功能

    使用clipboard.js库实现复制剪切功能

    项目地址:https://github.com/zenorocha/clipboard.js 现代化的“复制到剪切板”插件.不包含 Flash.gzip 压缩后仅 3kb. 为什么使用它 复制文字到剪切板不应该很难去实现.它不需要配置几十个步骤或者加载几百 KB 的文件.最重要的是,它不应该依赖 Flash 或其他臃肿的框架. 这是 clipboard.js 诞生的原因. 安装 你可以通过 npm 来安装它. npm install clipboard --save 如果你不使用包管理,仅需要下

  • 用js将内容复制到剪贴板兼容浏览器

    若想通过js将内容复制到剪贴板,本来不难,可是若考虑到浏览器的兼容性问题,就变的有点麻烦,使用jquery-zclip复制是一个不错的选择,借助flash实现浏览器的兼容.原理就不细讲了,下面说下如何实现. 比如我的html代码如下: 复制代码 代码如下: <div class="buttonBox"> <code rel="1"><span id="id_1">要复制的内容1</span><

  • js+html5实现canvas绘制网页时钟的方法

    js+html5实现canvas绘制网页时钟的方法

    本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的.带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <script type="tex

随机推荐