需要实现的功能:点击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. 阿里EMR部署

    选自定义购买: 选择master配置: 选择core配置: 下一步,选高级里在jdbc后填RDS的url, 用户名,密码: jdbc:mysql://rm-d7o7x76l11u0434zn.mysq ...

  2. redis 发布订阅、geo、bitmap、hyperloglog

    1.发布订阅 简介 发布订阅类似于广播功能.redis发布订阅包括 发布者.订阅者.Channel 命令 命令 作用 时间复杂度 subscribe channel 订阅一个频道 O(n) unsub ...

  3. H. The Nth Item(The 2019 Asia Nanchang First Round Online Programming Contest)

    题意:https://nanti.jisuanke.com/t/41355 给出N1,计算公式:A=F(N)Ni=Ni-1 ^ (A*A),F为类斐波那契需要矩阵快速幂的递推式. 求第k个N. 思路: ...

  4. iview给布局MenuItem标签绑定点击事件

    @click.native="menuHandleClick"

  5. 【已解决】Field injection is not recommended和Could not autowired. No beans of 'xxx' type found.

    目录 问题 解决办法 备注 问题 在项目中,我们使用Spring的@Autowired注解去引入其他类时有时候阿里的编码规约插件就会提示:"Field injection is not re ...

  6. 对接外网post,get接口封装类库

    public class HttpHelper { public static string GetAsync(string url)  { HttpWebRequest request = WebR ...

  7. eclipse设置字体

  8. vue开发后台管理系统有感

    使用vue开发后台近一个月,今天终于完成得差不多了,期间也遇到很多的问题,所以利用现在的闲暇时间做个总结 使用element-ui基础,这次使用了vue-element-admin(github地址) ...

  9. vue进阶:vue-router(vue路由)的安装与基本使用

    vue路由安装与基本使用 vue嵌套路由 vue动态路由(路由组件传参) vue路由重定向和一些其他的路由相关 官方手册:https://router.vuejs.org/zh/ 一.vue路由安装与 ...

  10. 使用原生node.js搭建HTTP服务器,支持MP4视频、图片传输,支持下载rar文件

    前言 如何安装node.js,如何搭建一个简易的http服务器我这里就不再赘述了,不懂的同学可以先去学习一下.当然了,我写的也就属于简易版的增强版,大家有什么高见的欢迎提出,然后进入正题. 目录结构 ...