需要实现的功能:点击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. [Agc036D]Do Not Duplicate_链表_贪心_数论

    Do Not Duplicate 题目链接:https://atcoder.jp/contests/agc036/tasks/agc036_b 题解: 首先最后肯定至多只有$n$个数. 我们想处理出来 ...

  2. Springboot问题解决记录

    本随笔只为了方便查阅 如何将SpringBoot项目地打成一个war包: 传送门:https://blog.csdn.net/zhoucheng05_13/article/details/779152 ...

  3. Spring的四种事务特性,五种隔离级别,七种传播行为

    Spring事务: 什么是事务: 事务逻辑上的一组对数据对操作,组成这些操作的各个逻辑单元,要么一起成功,要么一起失败. 事务特性(4种): 原子性(atomicity):强调事务的不可分割:一致性( ...

  4. Mysql中多表删除

    1.从MySQL数据表A中把那些id值在数据表B里有匹配的记录全删除掉 DELETE t2 FROM A t1,B t2 WHERE t1.id = t2.id DELETE FROM t2 USIN ...

  5. Petya and Construction Set(图的构造) Codeforces Round #583 (Div. 1 + Div. 2, based on Olympiad of Metropolises)

    题意:https://codeforc.es/contest/1214/problem/E 有2n个点,每个2*i和2*i-1的距离必须是Di(<=n),现在让你构造这个树. 思路: 因为Di小 ...

  6. 分词搜索 sphinx3.1.1+php+mysql

    sphinx3.1.1的安装与使用 下载sphinx3.1.1 wget http://sphinxsearch.com/files/sphinx-3.1.1-612d99f-linux-amd64. ...

  7. k8s之statefulSet-有状态应用副本集控制器

    1.概述 无状态应用更关注群体,任何一个成员都可以被取代,有状态应用关注的是个体.用deployment控制器管理的nginx.myapp等都属于无状态应用,像mysql.redis.zookeepe ...

  8. 你懂什么是分布式系统吗?Redis分布式锁都不会?

    分布式系统涉及到很多的技术.理论与协议,很多人也说,分布式系统是“入门容易,深入难”,有一些人简历上写着熟悉分布式系统,很多人都是管中窥豹只见一斑. 究竟什么是分布式系统? 分布式系统是由一组通过网络 ...

  9. 怎样理解 Vue 中的计算属性 computed 和 methods ?

    需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...

  10. Java-this关键词

    this关键词 1,this调用本类属性 在程序里面是有this可以实现以下三类的结构的描述: ·当前类中的属性:this.属性: ·当前类中的方法(普通方法.构造方法):this().this.方法 ...