各种站点有很多类似的代码，不过都是拿来即用，连个解释也没有。大概看了一下，现在主要使用的有两种办法：

　　　　1.documen.execCommand("Copy")或者window.cliperboard

　　　　2.利用flash来访问剪贴板

　　但是上面两种的兼容性不好。第一种仅适用于ie内核的浏览器，火狐、Chrome、Safari都不行。第二种的话完全依赖于是否安装了Flash，上面这些浏览器只有Chrome内置Flash，而且在Flash9和10之间调用方法有差异。

　　所以降级一下，对于IE用户提供直接点击复制，对于Chrome等用户，只能提示其使用组合件CTRL+C了。

　　代码如下：

　　                                             

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

    </head>

    <body>

        <button onclick="copyToCliper('复制的实际内容')">按钮</button></div>

        <script type="text/javascript">

            function copyToCliper(msg){

                var Sys = {};

                var ua = navigator.userAgent.toLowerCase();

                var s;

                (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :

                (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :

                (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :

                (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :

                (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

                if( Sys.ie ){

                    var _text = document.createElement("textarea");

                    _text.style.width = "1px";

                    _text.style.height = "1px";

                    _text.style.background = "transparent";

                    _text.style.border = "none";

                    _text.style.resize = "none";

                    _text.style.filter = "alpha(opacity=0)";

                    _text.textContent = msg;

                    document.body.appendChild(_text);

                    _text.select(); //选择对象

                    document.execCommand("Copy"); //执行浏览器复制命令

                    alert("已复制。");

                }

                else{

                    window.prompt("您的浏览器不支持直接复制\n请使用Ctrl+C来复制文本框内容，确认完成后点击关闭。",msg);

                }

            }

        </script>

    </body>

</html>

【javascript】点击复制内容的实现的更多相关文章

  1. Zclip点击复制内容到剪贴板兼容各浏览器

    WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...

  2. js插件实现点击复制内容到粘贴板，兼容IE8

    先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...

  3. 点击复制内容到剪切板（clipboard）

    clipboard官方文档:https://clipboardjs.com/ 安装: 1.用npm:npm install clipboard --save 2.下载:https://github.c ...

  4. js 点击复制内容

    <textarea id="pushUrlsTxt" rows="5" cols="55"></textarea> ...

  5. js 实现页面点击按钮复制内容

    前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...

  6. Salesforce LWC学习(二十八) 复制内容到系统剪贴板(clipboard)

    本篇参考: https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipb ...

  7. javascript : 点击按钮，把某标签中的内容复制到剪贴板

    需求如题. 静态页面如下. 需要的库:jquery(不用应该也能做). 浏览器:PC chrome 68 Mobile MIUI9.5(Android 7) <p>1.用电脑打开网址:&l ...

  8. jquery点击按钮复制内容

    做移动端的项目遇到一个需求要点击按钮复制dom里的内容,看了很多资料显示必须textarea或者input里的内容才能简单复制,还有就是用插件的了,最终都因为遇到各种问题放弃,最终选择了最简单的点击复 ...

  9. js 实现点击复制文本内容

    js  实现点击复制文本内容 <table> <tr><td>姓名:<span onclick="copyContent(this);" ...

随机推荐

  1. Solr-DIH建立索引并执行简单初步的查询

    我们将solr的安装目录设置为$SOLR_INSTALL,   ./solr start,不使用任何原有的examples来进行,启动完成后,不存在任何的core,提示No cores availab ...

  2. win10开启开发人员模式

    工具: win10 方法如下: 1.在Windows10系统桌面,点击开始菜单,然后在弹出窗口中选择“设置”菜单项 2.在打开的设置窗口中,选择“更新和安全”图标,并点击打开更新和安全窗口 3.在打开 ...

  3. mybatis一对多关联查询+pagehelper->分页错误

    mybatis一对多关联查询+pagehelper->分页错误. 现象: 网上其他人遇到的类似问题:https://segmentfault.com/q/1010000009692585 解决: ...

  4. Python开发一个WEB聊天室

    项目实战:开发一个WEB聊天室 功能需求: 用户可以与好友一对一聊天 可以搜索.添加某人为好友 用户可以搜索和添加群 每个群有管理员可以审批用户的加群请求,群管理员可以用多个,群管理员可以删除.添加. ...

  5. C入门程序整体框架图

    0.1:概述, 从头开始介绍一门编程语言总是显得很困难,因为有许多的细节还没有介绍,很难让读者在大脑中形成一幅完整的图, 所以起步时以一个列程序向学折介绍大体的C,试图使大家对C有一个整体大概 影响. ...

  6. 控制 TextBox 的滚动条

    利用 EM_LINESCROLL 信息控制 TextBox 的卷动. 在含有卷动轴的 TextBox 中, 如何以程序控制 TextBox 的卷动? 传送 EM_LINESCROLL 信息给 Text ...

  7. ETL 脚本任务

    Public Sub Main()        '        ' Add your code here        '        Dim sbWA As New StringBuilder ...

  8. springmvc框架自带的异常处理器SimpleMappingExceptionResolver的使用

    使用分三步 1.定义异常类 2.在处理器中的用法 3.在springmvc配置文件中需要加配置

  9. 克拉 & 24K

    [克拉] 克拉(Ct)是宝石的质量(重量)单位,现定1克拉等于0.2克或200毫克.一克拉又分为100分,如50分即0.5克拉,以用作计算较为细小的宝石.因为宝石的密度基本上相同,因此越重的宝石体积越 ...

  10. Docker私有仓库registry的搭建及使用

    前言 由于Docker Hub公共仓库很多时候使用这并不是很方便,大分部因为网络的问题可能拉取的时候会很慢或者拉取不到,所以搭建一个本地的私有仓库. 准备 由于此篇文章是在Kubernetes集群安装 ...