注意第一部分的内容不兼容Safari，全兼容的请使用第二部分方法

第一部分

查看demo请点  这里。

原生js复制指定内容到剪切板，超简单的实现方式，

实现思路如下：

1.创建一个input，把想要复制的内容赋值到input的value上；

2. 把这个input插入到body内；

3.获取这个input，对它执行选中；

4.执行documen的copy事件；

5，删除刚刚插入的input。

代码如下：

html:

<button id="btn">复制</button>

js:

// 复制的方法

function copyText(text, callback){ // text: 要复制的内容， callback: 回调

    var tag = document.createElement('input');

    tag.setAttribute('id', 'cp_hgz_input');

    tag.value = text;

    document.getElementsByTagName('body')[0].appendChild(tag);

    document.getElementById('cp_hgz_input').select();

    document.execCommand('copy');

    document.getElementById('cp_hgz_input').remove();

    if(callback) {callback(text)}

}

// 点击按钮调用复制

document.getElementById('btn').onclick = function (){

    copyText( '123456', function (){console.log('复制成功')})

}

直接复制下来看效果的：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>title</title>

    </head>

    <body>

        <button id="btn">复制</button>

        <script type="text/javascript">

            // 复制的方法

            function copyText(text, callback){ // text: 要复制的内容， callback: 回调

                var tag = document.createElement('input');

                tag.setAttribute('id', 'cp_hgz_input');

                tag.value = text;

                document.getElementsByTagName('body')[0].appendChild(tag);

                document.getElementById('cp_hgz_input').select();

                document.execCommand('copy');

                document.getElementById('cp_hgz_input').remove();

                if(callback) {callback(text)}

            }

            // 点击按钮调用复制

            document.getElementById('btn').onclick = function (){

                copyText( '123456', function (){console.log('复制成功')})

            }

        </script>

    </body>

</html>

第二部分

使用这个：https://github.com/zenorocha/clipboard.js
引入这个插件的js，

使用方法，去看他的demo吧， 拜拜！

（完）

js复制内容到剪切板的更多相关文章

  1. 在多浏览器使用JS复制内容到剪切板，无需插件

    最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷 ...

  2. 简单实现兼容各大浏览器的js复制内容到剪切板

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...

  3. js复制内容到剪切板，兼容pc和手机端，支持Safari浏览器

      最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行 ...

  4. 原生js 复制内容到剪切板

    代码: function copyHandle(content){ let copy = (e)=>{ e.preventDefault() e.clipboardData.setData('t ...

  5. js 复制内容到剪切板

    function oCopy(objname){//只兼容IE var obj = $(objname); obj.select(); js=obj.createTextRange(); js.exe ...

  6. JS禁止右键查看源码，禁止复制，复制内容到剪切板

    有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...

  7. javascript复制内容到剪切板/网页上的复制按钮的实现

    javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...

  8. js实现复制内容到剪切板，兼容pc和手机端，支持Safari浏览器

    Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...

  9. 兼容安卓和ios实现一键复制内容到剪切板

    实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

随机推荐

  1. 提高你的Python编码效率的“武林秘籍”

    我用Python编程有几年了, 并且我仍然经常惊讶于Python代码可以如何的简洁,如何的 DRY . 我学到了很多小贴士和技巧,大多数来自于阅读开源项目的源代码,像Django, Flask, Re ...

  2. 本地使用js或jquery操作cookie在谷歌浏览器chrome中不生效

    一般是在本地调试cookie,无论使用jquery cookie插件还是js原生态cookie方法,在谷歌浏览器chrome中都不生效,这是什么原因? 原因是: chrome不支持js在本地操作coo ...

  3. jar包、war包

    JavaSE程序可以打包成Jar包(J其实可以理解为Java了),而JavaWeb程序可以打包成war包(w其实可以理解为Web了).然后把war发布到Tomcat的webapps目录下,Tomcat ...

  4. DP使用GUI推送WIN客户端是报110:1022错误的解决办法

    在使用GUI推送WIN客户端时,输入用户名和密码后报错: [Critical 110::1022]  Cannot connect to the SCM (Service Control Manage ...

  5. 15 Puzzle (4乘4谜题) IDA*(DFS策略与曼哈顿距离启发) 的C语言实现

    大家好!这是我的第一篇博客,由于之前没有撰写博客的经验,并且也是初入计算机和人工智能领域,可能有些表述或者理解不当,还请大家多多指教. 一.撰写目的 由于这个学期在上算法与数据结构课程的时候,其中一个 ...

  6. Homebrew1.5之后安装PHP和扩展

    Homebrew 1.5 宣布放弃 homebrew/php, 转而使用homebrew/core维护, 详见https://brew.sh/2018/01/19/homebrew-1.5.0/ 于是 ...

  7. 教你用Python解决非平衡数据问题（附代码）

    本文为你分享数据挖掘中常见的非平衡数据的处理,内容涉及到非平衡数据的解决方案和原理,以及如何使用Python这个强大的工具实现平衡的转换. 后台回复“不平衡”获取数据及代码~ 前言 好久没有更新自己写 ...

  8. Beta阶段基于spec评论作品

    组名:杨老师粉丝群 组长:乔静玉 组员:吴奕瑶  刘佳瑞  公冶令鑫  杨磊  刘欣  张宇  卢帝同 一.测试目标:拉格朗日2018——飞词 下面是他们的小游戏在运行时的一些截图画面: 1.开始界面 ...

  9. java 实验1

    北京电子科技学院(BESTI) 实     验    报     告 课程:Java程序设计 班级:1352 姓名:杨光 学号:20135233 成绩:            指导教师:娄嘉鹏  实验 ...

  10. 20135337朱荟潼Java实验报告二

    20135337朱荟潼 实验二 Java面向对象程序设计 一.实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. 熟悉S.O.L ...