需要实现的功能:点击button,复制如下值到剪贴板,

链接:http://192.168.0.203:7083/share/nRrDLqBBJFjXQ5lk9Nv60GV6 提取码: 3NmH

常用的方法是:document.execCommand('copy')

<input id='input_url' type="text">
var input = $('#input_url');
input.select();
document.execCommand("Copy");

用这个方法有三点需要注意否则将会失效

1、input框不能有disabled属性
2、根据第一条扩展,input的width || height 不能为0;
3、input框不能有hidden属性

普通的复制功能到这里就结束了

但是需求上要将两个input框中的值拼接成一个字符串,然后放入剪贴板,所以上面的方法不太适用。最后想了一种取巧的方法

再增加一个input框,用来存放拼接好的字符串,只需要让这个input框不显示可复制就可以了

给input框设置以下两个属性

opacity透明度(这样就看不到了,但是有可能还占用了一些空间)

position: absolute;(绝对定位)

链接:<input type="text" id="linkUrl">
提取码:<input type="text" id="extractCode">
<input id='inputCopyText' style='opacity:0;position:absolute;' type="text">
<button id="copyLink">复制链接及提取码</button>
      $("#copyLink").click(function(){
$('#inputCopyText').val("链接:"+$('#linkUrl').val()+" 提取码: "+$('#extractCode').val());
var Url2 = document.getElementById("inputCopyText");
Url2.select();
document.execCommand("Copy"); // 执行浏览器复制命令
alert("复制成功!");
});

如上所述,这样就实现了复制多个内容到剪贴板的功能

JS 实现复制一个或多个内容到剪贴板的更多相关文章

  1. JS实现复制网页内容自动加入版权内容代码和原文链接

    JS实现复制网页内容自动加入版权内容代码和原文链接 实现代码:在body内放入如下代码即可: <script type="text/javascript"> var S ...

  2. js循环复制一个div

    <html> <head> <title>Test of cloneNode Method</title> <script type=" ...

  3. IO编程——复制一个文件中的内容到另一个文件

    public class TestIO { public static void main(String[] args) { File inputFile = new File("a.txt ...

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

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

  5. js复制内容到剪贴板

    我们web上的复制,有时候尽管可以用鼠标选中,然后复制,但是某些时候,文字不方便选中.因此,我们自定义一个复制按钮,然后通过点击它,把想要的内容复制到剪贴板上.我归纳总结了几种方法: 1.ZeroCl ...

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

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

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

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

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

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

  9. C# 复制一个Word文档的部分或全部内容到另一个Word文档

    C# 复制一个Word文档的部分或全部内容到另一个Word文档 我最近喜欢折腾Office软件相关的东西,想把很多Office软件提供的功能用.NET来实现,如果后期能把它用来开发一点我自己的小应用程 ...

随机推荐

  1. POJ3450最长公共子串【kmp】

    题目链接:http://poj.org/problem?id=3450 题目大意:给定n个长度不超过200的字符串,n < 4000.求这些字符串的最长公共子串,若没有,则输出 “IDENTIT ...

  2. 解决Python查询Mysql中文乱码问题

    前段时间,自己瞎动手用Django写了一个更新zip包和sql到远程服务器的工具.但Python从Mysql中读取出来的中文字符会乱码,如下图: 解决办法:Python连接Mysql时指定charse ...

  3. LeetCode 142——环形链表II(JAVA)

    给定一个链表,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始). 如果 pos 是 - ...

  4. 并不对劲的bzoj4945:loj2305:uoj317:p3825[NOI2017]游戏

    题目大意 2-SAT,其中有\(d\)(\(d\leq 8\))个点是\(3-SAT\). 题解 枚举\(d\)个点不取三个中(假设三个为\(a,b,c\))的哪一个,然后整体变成做\(2-SAT\) ...

  5. 解决github pages和github .md文件图片不显示

    博客园上传的图片,在github上无法显示. 在github项目下建立img文件夹,放上图片 两种方式 项目绝对路径 https://raw.githubusercontent.com/用户名/项目名 ...

  6. 【zhifu】web开发中的支付宝支付和微信支付

    一.支付类型: 支付宝支付: 支付宝app内的网页支付: app外(即普通浏览器)网页支付: 微信支付: 微信app内的支付(在这里叫公众号支付) app外的支付(微信H5支付): 微信公众号的支付宝 ...

  7. python爬虫下正则各种字符串数据匹配

    s = '*\/:?"<>|' #这9个字符在Windows系统下是不可以出现在文件名中的str1 = '\巴拉<1"!11[]>1*hgn/p:?|' # ...

  8. vue学习(3)-增删改查

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. centos7 开放/关闭防火墙和端口

    --------------------------------------------------------------防火墙----------------------------------- ...

  10. Struts简介

    一.简介 Apache Struts 2最初被称为WebWork 2,它是一个简洁的.可扩展的框架,可用于创建企业级Java web应用程序.设计这个框架是为了从构建.部署.到应用程序维护方面来简化整 ...