一、 原生js实现,电脑可以用,手机不可以用

  1. 必须是 input元素 才可以使用

    <input id="code" type="text" value="www">

    <span class="copy-btn" v-on:click="copy">复制</span>

    //获取input并执行选中

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

    //执行documen的copy事件
    document.execCommand('copy');

二、clipboard.js 实现,电脑、手机都可以用  https://github.com/zenorocha/clipboard.js

  1.  input、div 任何元素都可以使用

    <span id="code">123456</span>

    <span class="copy-btn" data-clipboard-target="#code" v-on:click="copy">复制</span>

    let clipboard = new ClipboardJS('.copy-btn');
    clipboard.on('success', function(e) {
      //复制成功
      console.log("复制成功");
      //取消选中
      e.clearSelection();
    });

												

js实现复制内容到剪贴板的更多相关文章

  1. 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》

    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...

  2. 使用clipboard.js实现复制内容至剪贴板

    下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...

  3. JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

  4. JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】

    正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...

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

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

  6. JavaScript复制内容到剪贴板

    移动端 需要复制内容到剪贴板时, clipborad.js 不支持ios微信版浏览器,可配合使用 execCommand 使其兼容, 完成一键复制淘口令的功能. 注意使用clipborad.js时,i ...

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

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

  8. js实现复制内容

    一.实现点击按钮,复制文本框中的的内容                         <script type="text/javascript"> function ...

  9. js实现复制内容到粘贴板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. hive连接hbase

    使用hive连接hbase 前提说明:一个hive表指向一个hbase表,一对一,不能多对一 建立外部表 CREATE EXTERNAL TABLE test_hbase( key string, m ...

  2. POJ2942Knights of the round table

    这题第一次做的人一般是颓题解的. 首先我们转化一下问题,既然厌恶的人不能一起出席,是一种不传递关系,我们构建补图,这样补图的边表示两个骑士可以同时出席. 此时,由于只能有奇数个人参加,则我们要找出奇环 ...

  3. 对HTML中P标签的思考

    这几天在用VUE-CLI做一个demo,然后在渲染一个列表的时候遇到了一个挺不可思议的事情: <!--这只是一小部分,v-for的内容在上方--> <div class=" ...

  4. python如何实现一个类似重载的功能

    def post(): print("this is post") print("想不到吧") class Http(): @classmethod def g ...

  5. Struts2中的ModelDriven机制及其运用、refreshModelBeforeResult属性解决的问题

    1.为什么需要ModelDriven? 所谓ModelDriven,意思是直接把实体类当成页面数据的收集对象.比如,有实体类User如下: package cn.com.leadfar.struts2 ...

  6. vue-lazyload 的vue 懒加载的使用

    vue-lazyload vue 图片懒加载的使用 下载 vue-lazyload npm i vue-lazyload -S 使用 vue-lazyload 在 src 下面的 main.js 的文 ...

  7. Less相关的用法以及Vue2.0 中如何使用Less

    (一)less的用法: (二)vue 2.0中如何使用less插件 1:vue先安装less插件 npm install less less-loader --save 2:修改webpack.bas ...

  8. python sqlalchemy 进行 mysql 数据库操作

    1. 进行mysql数据库的创建,如果已经存在,就相当于进行数据库的连接操作 from sqlalchemy import create_engine from sqlalchemy.ext.decl ...

  9. windows驱动程序

    官网文档 https://docs.microsoft.com/zh-cn/windows-hardware/drivers/

  10. Zabbix - 实现对磁盘动态监控

        回到目录 前言 zabbix一直是小规模互联网公司服务器性能监控首选,首先是免费,其次,有专门的公司和社区开发维护,使其稳定性和功能都在不断地增强和完善.zabbix拥有详细的UI界面和分组策 ...