js实现复制内容到剪贴板

一、 原生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();
    });



原文地址:https://www.cnblogs.com/zhangruiqi/p/12003065.html

时间: 2024-07-31 01:00:03

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

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

前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroClipboard.js). ZeroClipboard.js在Git上的地址为:https://github.com/zeroclipboard/zeroclipboard 注意:此js库不支持兼容手机端(包括Android.IOS),仅支持PC端浏览器. 第一步:将插件库引入到工程中. 把Git上

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

现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏览器的js复制内容到剪贴板的方案: 这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值“clipboard=..”,通过这个赋

蚂蚁老码农——JavaScript复制内容到剪贴板

最近一个活动页面中有一个小需求,用户点击或者长按就可以复制内容到剪贴板,记录一下实现过程和遇到的坑.常见方法查了一下万能的Google,现在常见的方法主要是以下两种: 第三方库:clipboard.js原生方法:document.execCommand() 分别来看看这两种方法是如何使用的.clipboard.js这是clipboard的官网:clipboardjs.com/,看起来就是这么的简单.引用直接引用: <script src="dist/clipboard.min.js&quo

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

Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<body> <div id="cardList"> <div class="btn">点击我,复制我</div> </div> <script type="text/javascript">

js实现复制内容到粘贴板

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>js复制内容到粘贴板</title> 6 <style> 7 .flex-r { 8 display: flex; 9 flex-direction: row; 10 align-content: center; 11 justify-content: spac

js复制内容到剪贴板格式化粘贴到excel中

<input id="Button1" type="button" value="导出EXCEL" onclick="copyToClipboard('ta')"> <div style="width: 760px;float:left;" id="ta"> <table border="0" style="" cel

兼容各浏览器 复制内容到剪贴板

<script type="text/javascript" src="../Scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../js/ZeroClipboard/ZeroClipboard.js"></script> <script type="text/ja

ClipboardData实现复制内容到剪贴板,兼容各种浏览器

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="registAdd.aspx.cs" Inherits="registAdd" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server&

移动端实现复制内容至剪贴板

需求场景 使用document.execCommand()方法,以下简称为"命令API". 示例一 HTML部分 <input type="text" id="text_input" /> <button type="button" id="copy_text">copy</button> JavaScript部分 var inputElem = document.get