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

第一部分

查看demo请点  这里。

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

实现思路如下：

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

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

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

4.执行documen的copy事件；

5，删除刚刚插入的input。

代码如下：

html:

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

js:

  1. // 复制的方法
  2. function copyText(text, callback){ // text: 要复制的内容， callback: 回调
  3.     var tag = document.createElement('input');
  4.     tag.setAttribute('id', 'cp_hgz_input');
  5.     tag.value = text;
  6.     document.getElementsByTagName('body')[0].appendChild(tag);
  7.     document.getElementById('cp_hgz_input').select();
  8.     document.execCommand('copy');
  9.     document.getElementById('cp_hgz_input').remove();
  10.     if(callback) {callback(text)}
  11. }
  12.  
  13. // 点击按钮调用复制
  14. document.getElementById('btn').onclick = function (){
  15.     copyText( '123456', function (){console.log('复制成功')})
  16. }

直接复制下来看效果的：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>title</title>
  6.     </head>
  7.     <body>
  8.  
  9.         <button id="btn">复制</button>
  10.  
  11.         <script type="text/javascript">
  12.  
  13.             // 复制的方法
  14.             function copyText(text, callback){ // text: 要复制的内容， callback: 回调
  15.                 var tag = document.createElement('input');
  16.                 tag.setAttribute('id', 'cp_hgz_input');
  17.                 tag.value = text;
  18.                 document.getElementsByTagName('body')[0].appendChild(tag);
  19.                 document.getElementById('cp_hgz_input').select();
  20.                 document.execCommand('copy');
  21.                 document.getElementById('cp_hgz_input').remove();
  22.                 if(callback) {callback(text)}
  23.             }
  24.  
  25.             // 点击按钮调用复制
  26.             document.getElementById('btn').onclick = function (){
  27.                 copyText( '123456', function (){console.log('复制成功')})
  28.             }
  29.  
  30.         </script>
  31.     </body>
  32. </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. js 日期，时间函数 及相关运算大全

    一.在js中如何比较两个时间字符串的大小 方法一: function CompareDate(d1,d2){     return ((new Date(d1.replace(/-/g,"/ ...

  2. 六种流行的语言大餐---C、C++、python、Java、php、C#你更喜欢哪一个呢？

    引言 鉴于五一期间超大的人流量,LZ思来想去,最终还是选择蜗居在自己的出租屋.无聊之际,当然不能忘了做点什么事情,于是LZ就研究了一下几种语言的皮毛,在这里献丑一翻,希望各位猿友莫要见笑. 不过说来也 ...

  3. 简单字典实现（KV问题）

    搜索二叉树基本概念请看上篇博客 这两个问题都是典型的K(key)V(value)问题,我们用KV算法解决. 判断一个单词是否拼写正确:假设把所有单词都按照搜索树的性质插入到搜索二叉树中,我们判断一个单 ...

  4. Java+Netty实现的RESTful框架--netty-rest-server

    在工作中用Netty做了几个服务,感觉Netty做出来的程序性能好,资源占用少,但是实现Http服务比较麻烦,于是就参考Spring MVC的注解基于Netty实现了一个轻量级的RESTful框架. ...

  5. let与var区别

    <!DOCTYPE html> <html> <head> <title>let与var区别</title> <meta charse ...

  6. vue组件--通讯录

    简介 在移动端开发中,通讯录是个很常见的需求. 通讯录通常要实现以下功能 首字母导航 滚动到一定位置首字母固定 在线通讯录demo 布局 通讯录是典型的上下两栏布局,上面是header,下面是内容区, ...

  7. Python之Django基本命令

    一.新建项目 $django-admin.py startproject project_name # 特别是在 windows 上,如果报错,尝试用 django-admin 代替 django-a ...

  8. 单纯形法MATALAB实现

    参考单纯形法的步骤,MATALAB中的实现如下(求极小值): 注:对于极大值的求解,只需要对目标函数添加负号,求解出来的\(X\),再带入原目标函数即可. function [ X, z ] = si ...

  9. 别再犯低级错误，带你了解更新缓存的四种Desigh Pattern

    在我们使用分布式缓存Redis或者Memcached编写更新缓存数据代码时,我们总是会犯一个逻辑错误.先删除缓存,然后再更新数据库,而后续的操作会把数据再装载的缓存中.试想,两个并发操作,一个是更新操 ...

  10. FileZilla-FTP连接失败

    状态: 已登录状态: 读取“/”的目录列表...命令: CWD /响应: 250 CWD successful. "/" is current directory.命令: TYPE ...