需要实现的功能:点击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. [转帖]英特尔首款采用10nm技术的混合CPU“Lakefield”即将发布

    英特尔首款采用10nm技术的混合CPU“Lakefield”即将发布 intel 也出soc了 里面的东西 跟 安卓和 apple的a系列很像. https://baijiahao.baidu.com ...

  2. Plsql配置后,sql语句可以简写 快速使用

    in=INSERT up=UPDATE se=SELECT fr=FROM wh=WHERE or=ORDER BY de=DELETE df=DELETE FROM sf=SELECT * FROM ...

  3. Codeforces Round #586 (Div. 1 + Div. 2) D.Alex and Julian 简单证明

    题意:在序列中删除最少元素使得得到的图是二分图. 其中点是整数域的点. 比如b1=2   那么a可以连b当且仅当|a-b|=2 同时这里的a,b是任意整数. 怎样判定一个序列是否合法呢?于是想到了二分 ...

  4. # Python3微博爬虫[requests+pyquery+selenium+mongodb]

    目录 Python3微博爬虫[requests+pyquery+selenium+mongodb] 主要技术 站点分析 程序流程图 编程实现 数据库选择 代理IP测试 模拟登录 获取用户详细信息 获取 ...

  5. Guava -- 集合类 和 Guava Cache

    Guava -- 集合类 和 Guava Caches 1. 什么是 Guava Guava 是 google 推出的一个第三方 java 库,用来代替 jdk 的一些公共操作,给我印象特别深的就是 ...

  6. Java Web ClassLoader工作机制

    一.ClassLoader的作用: 1.类加载机制:父优先的等级加载机制 2.类加载过程 3.将Class字节码重新解析成JVM统一要求的对象格式 二.ClassLoader常用方法 1.define ...

  7. vs code 快捷键设置:选中字母可以快速全部转换为大写或小写

    文件--->首选项--->键盘快捷方式--->搜索:"大写"--->点击"转换为大写"左侧的加号,然后设置快捷键后按enter即可完成添 ...

  8. 无障碍开发(四)之ARIA aria-***状态值

    aria-***状态值

  9. java实现spark常用算子之TakeSample

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...

  10. 文档.Write()和文档.Writeln()石材

    文档.Write()和文档.Writeln()文档是Javascript对象,其中封装了许多有用的方法,其中Write()和Writeln()是直接从浏览器窗口输出文本信息的方法.文件.Write() ...