zoukankan      html  css  js  c++  java
  • JS 实现复制一个或多个内容到剪贴板

    需要实现的功能:点击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("复制成功!");
            });

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

  • 相关阅读:
    iOS UITextField限制输入长度
    SpringBoot 统一异常处理
    idea+springboot+freemarker热部署
    JAVA 实现链表
    mysql 添加新用户 赋予权限
    Spring MVC 集成 Redis集群
    js获取当前日期时间及其它操作
    MySQL Error Codes MYSQL的错误代码
    js数组 删除元素
    JS table form 序列化提交
  • 原文地址:https://www.cnblogs.com/banma/p/11586520.html
Copyright © 2011-2022 走看看