精华内容
下载资源
问答
  • js点击按钮复制文本到粘贴板
    2021-03-02 09:48:09

    需求:点击 按钮复制文本,
           本来写死一个input或者textarea设置复制文本为默认值,然后设置隐藏控件,但是隐藏的控件,复制时浏览器找不到复制的对象,原因未知,故使用如下方法,
           获得复制的文本,然后创建input结构,再复制文本,最后设置结构隐藏即可。

      $('.copy-text').click(function() {
                let copyText = document.getElementById("copyName").innerText;
                let oInput = document.createElement('input');
                oInput.value = copyText;
                document.body.appendChild(oInput);
                oInput.select();
                document.execCommand("Copy");     
                oInput.style.display = 'none'; //一定放在最后,不然复制失败
                alert('复制成功');
            })

    更多相关内容
  • 最近遇到一个需求,需要点击按钮复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一、原理分析 浏览器提供了 ...
  • 本文实例为大家分享了js点击按钮复制文本到粘贴板的具体代码,供大家参考,具体内容如下 准备:先去下载clipboard.js: 官网 移动端效果如下: 应用:html+js 代码如下: <!DOCTYPE html> <...
  • 本文通过实例代码给大家介绍了移动端点击按钮复制文本内容 ,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • JS点击按钮复制文本

    2021-12-24 10:24:42
    在PC端上通过点击按钮复制对应文本的业务场景,不经常有,但是让我碰见了,也了解了下实现方法。 1、通过createElement生成一个input输入框,并将其透明度设为0,使得用户无感知; 2、将需要复制的内容赋值到输入框...

    在PC端上通过点击按钮复制对应文本的业务场景,不经常有,但是让我碰见了,也了解了下实现方法。

    1、通过createElement生成一个input输入框,并将其透明度设为0,使得用户无感知;

    2、将需要复制的内容赋值到输入框内,(一定要将输入框添加到页面body中)才能使用select函数选中。

    3、通过document.execCommand(“copy”)执行浏览器复制命令,就能将对应文本进行复制了

    function handleCopy(text) {
      const input = document.createElement('input')
      input.style.cssText = 'opacity: 0;';
      input.type = 'text';
      input.value = text; // 修改文本框的内容
      document.body.appendChild(input)
      input.select(); // 选中文本
      document.execCommand("copy"); // 执行浏览器复制命令
      this.$message({message: '复制成功',type: 'success'})
    },
    
    展开全文
  • html5的webAPI接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能,不需要依赖flash。 代码如下: /* 创建range对象 */ const range = document.createRange(); range.selectNode(element); // ...
  • <span class="copyMa" @click="copy()">点击复制</span> copy(){ let random = this.$refs.randomCodeRef.innerHTML; const input = document.createElement('input'); ...

    点击按钮,执行复制指定位置的文本,具体实现方案如下:

    1、添加点击事件

    <span class="copyMa" @click="copy()">点击复制</span>

    2、copy的实现方法(未优化)

    copy(){
         let random = this.$refs.randomCodeRef.innerHTML;
         const input = document.createElement('input');
         document.body.appendChild(input);
         input.setAttribute('value',random);
         input.select();
         document.execCommand("Copy");
    },

    3、以上方法点击一次就会执行一次复制,也就是说会在body里创建一个input标签,点击n次就会创建n个,不符合逻辑,做以下优化,复制完之后将创建出来的input的dom移除(优化方案)

    copy(){
         let random = this.$refs.randomCodeRef.innerHTML;
         const input = document.createElement('input');
         document.body.appendChild(input);
         input.setAttribute('value',random);
         input.setAttribute('create',1);
         input.select();
         document.execCommand("Copy");
         var list=document.getElementsByTagName('input')
         var inputList = Array.prototype.slice.call(list)
         inputList.forEach((item)=>{
             if(item.getAttribute('create'))document.body.removeChild(item);
         });
    },

    注意:如果复制的文本需要换行展示,就不能使用上面的动态创建 input 标签,因为 input 标签是单文本标签,不会换行,也就是\r\n不起作用,但是\t空格还是起作用的,所以建议使用 textarea 所以如果你复制的文本需要换行展示,就可以参考以下方法

    //如下换行设置 \r\n
    
    copy(){
         let copyText = "分享链接:\r\n"+this.shareQrcodeUrl+"\r\n";
    
         copyText = copyText +"分享码:"+this.shareCode+"\r\n";
    
         const input = document.createElement('textarea');
         document.body.appendChild(input);
         input.innerHTML = copyText;
         input.setAttribute('code',1);
         input.select();
         document.execCommand("Copy");
    
         var list = document.getElementsByTagName('textarea');
         var inputList = Array.prototype.slice.call(list);
         inputList.forEach((item)=>{
                if(item.getAttribute('code'))document.body.removeChild(item);
         });
    },

     

    展开全文
  • 点击复制功能主要通过 clipboard.js 来实现 在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话,则复制不成功,使用步骤如下: 1、引入clipboard.js,方法如下: 第一种直接npm安装...
  • js点击复制剪贴板鼠标点击文字弹出复制链接按钮 js点击复制剪贴板鼠标点击文字弹出复制链接按钮
  • 最近遇到一个需求,需要点击按钮复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一、原理分析 ...

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板

    之前做过复制输入框的内容,原以为差不多,结果发现根本行不通

    尝试了各种办法,最后使了个障眼法,实现了下面的效果

     

    一、原理分析

    浏览器提供了 copy 命令 ,可以复制选中的内容

    document.execCommand("copy")

    如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用  copy 命令,将文本复制到剪切板

    但是 select() 方法只对 <input> 和 <textarea> 有效,对于 <p> 就不好使

     

    最后我的解决方案是,在页面中添加一个 <textarea>,然后把它隐藏掉

    点击按钮的时候,先把 <textarea> 的 value 改为 <p> 的 innerText,然后复制 <textarea> 中的内容

     

    二、代码实现

    HTML 部分

    <style type="text/css">
       .wrapper {position: relative;}
       #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
    </style>
    
    <div class="wrapper">
       <p id="text">我把你当兄弟你却想着复制我?</p>
       <textarea id="input">这是幕后黑手</textarea>
       <button onclick="copyText()">copy</button>
    </div>

    JS 部分

    <script type="text/javascript">
        function copyText() {
          var text = document.getElementById("text").innerText;
          var input = document.getElementById("input");
          input.value = text; // 修改文本框的内容
          input.select(); // 选中文本
          document.execCommand("copy"); // 执行浏览器复制命令
          alert("复制成功");
        }
      </script>

    亲测,Firefox 48.0,Chrome 60.0,IE 8 都能用

    展开全文
  • js 点击按钮复制文本

    2019-12-16 14:18:38
    使用select()可以将文本复制到剪切板,但是只能在input和textarea有用,其他标签就不好用,先放在input和textarea上的使用方法 <input type="text" name="" value="123" id="input"> <script> //jq写法 ...
  • function copy() { var text = document.getElementById( "text" ).innerText; // 拿到元素中的value值 var input = document.getElementById( "input" );... // 选中文本 document.execCommand( "co...
  • js点击按钮复制文本 // 复制文本 function copyText(event) { let range = document.createRange(); window.getSelection().removeAllRanges(); // 清除页面中已有的selection range.selectNode(event.target);...
  • 主要为大家详细介绍了js+html5实现复制文字按钮,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 一.原理解析 浏览器本身提供了一个copy命令,利用它可以复制选中的内容: ...既然出现了这个问题,那么我们顺着思路想就能想到解决办法的:我们可以在页面中添加一个textarea,然后把他隐藏掉,当我们点击按钮的时候
  • 点击按钮复制文本

    2022-04-06 16:48:47
    点击按钮复制文本
  • 适用于移动端js实现复制功能,点击按钮,提示“复制成功”,经常用来复制订单编号和快递单号等,避免用户手动输入的麻烦

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,864
精华内容 18,345
关键字:

js点击按钮复制文本