需要实现的功能:点击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. C语言Ⅰ博客作业07

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-3/homework/9933 我在这个课程的目 ...

  2. SpringBoot默认日志的使用方法及常用配置

    SpringBoot默认采用slf4j+logback 的组合形式,但也提供对JUL.log4j2.Logback提供了默认配置. 我们使用IDEA的spring初始化创建一个springboot项目 ...

  3. poco编译与运行

    1.引言 Poco C++库是: 一系列C++类库,类似Java类库,.Net框架,Apple的Cocoa; 侧重于互联网时代的网络应用程序 使用高效的,现代的标准ANSI/ISO C++,并基于ST ...

  4. Mysql-Sqlalchemy-ORM-many_to_many

    orm_m2m.py from sqlalchemy import Table,Column,Integer,String,DATE, ForeignKey from sqlalchemy.orm i ...

  5. how to Simply Singleton Navigate the deceptively simple Singleton pattern---reference

    http://www.javaworld.com/article/2073352/core-java/simply-singleton.html JAVA DESIGN PATTERNS By Dav ...

  6. django 支持跨域请求配置

    参考:https://www.jianshu.com/p/63fb55bee142 核心注意点:

  7. java——HashSet类中的常见方法

    package com.xt.set; import java.util.HashSet; import java.util.Iterator; import java.util.Set; publi ...

  8. 【原创】大数据基础之Chronos

    官方:https://mesos.github.io/chronos/ mesos集群中替换crontab Chronos A fault tolerant job scheduler for Mes ...

  9. MVC4学习要点记四

    一.使用原生SQL使用EF的一个优点就是自动帮我们生成SQL,这在常规情况下很方便,但有些情况下用EF却不适合.另外还有些特别复杂的语句,利用EF很难生成.所以,EF提供一组方法用来执行原生的SQL. ...

  10. 移动端真机debug调试神器 vConsole学习(二)之实战

    项目中实际使用 在项目中实际使用的时候发现还是有很多问题的 最初使用方式  <script src="vconsole.min.js"></script> ...