一、 原生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. python3 基本数据类型转换

    '''基本数据类型1:虽然python中的变量不需要声明,但使用时必须赋值 1.整形变量 2.浮点型变量 3.字符型2:可以一个给多个变量赋值,也可以多个给多个变量赋值3:python3中有6个标准数 ...

  2. AIDL 的工作原理

    当创建AIDL文件并Clean Project 代码后,会生成相应的Java文件: 先来一段伪代码:类整体结构 /* * This file is auto-generated. DO NOT MOD ...

  3. C++入门经典-例6.23-字符串数组赋值与string

    1:代码如下: // 6.23.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #inc ...

  4. mysql统计前24小时数据没有补0

    SELECT t1. HOUR HOUR, COUNT(t2. HOUR) count FROM ( SELECT DATE_FORMAT( HOUR), '%y-%m-%d %H' ) HOUR F ...

  5. 【Java笔试】OYO校招Java工程师|牛客平台,算法:字符串翻转。附选择题解析

    文章目录 1.Java笔试算法题:字符串翻转 2.单选题: 2.1.同一进程下的多个线程可以共享哪一种资源:data section 2.2.一个树形的叶结点在前序遍历和后序遍历下,可以相同的相对位置 ...

  6. excel怎么只打印某页?excel怎么只打印某几页

    有时候我们需要打印的excel文件,内容较多有好几页,而我们只需要打印里面的部分内容,为了减少纸张.碳粉的浪费,我们怎样精准打印某页或某几页呢?   工具/原料   Excel / WPS软件 方法/ ...

  7. Java-UncaughtExceptionHandler 捕获线程异常

    实现 UncaughtExceptionHandler 类,重写 uncaughtException 方法. public class MyUncaughtExceptionHandler imple ...

  8. ccf 201712-4 行车路线(70分)

    ccf 201712-4 行车路线 解题思路: 首先Dijkstra是基于贪心算法的,即每一次作出的选择都具有贪心选择性.此题由于有“如果连续走小道,小明的疲劳值会快速增加,连续走s公里小明会增加s2 ...

  9. MySQL 存储过程 函数 routine 权限

    MySQL 存储过程 函数 routine 权限 Table of Contents 1. mysql存储过程/函数权限 1.1. 相关对象操作权限检查 1.2. 执行权限 1 mysql存储过程/函 ...

  10. springboot2.0数据制作为excel表格

    注意:由于公司需要大量导出数据成excel表格,因此在网上找了方法,亲测有效. 声明:该博客参考于https://blog.csdn.net/long530439142/article/details ...