zoukankan      html  css  js  c++  java
  • 前端复制粘贴文字clipBoard.js的使用

    1. vue  中的复制粘贴:

    <div class="mainTextItem"  @click="copyTXTOne" id="copyOne" data-clipboard-target="#input1">
         <!-- 复制的内容写在 input1里面 -->
         <input type="text" v-model="goods_number" id="input1" readonly="readonly">
    </div>
         //引入clipboard.js
          <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
    
          <script>
              copyTXTOne(){
                        var that = this;
                        var clipboard = new ClipboardJS('#copyOne')
                        // 显示用户反馈/捕获复制/剪切操作后选择的内容
                        clipboard.on('success', function (e) {
                            e.clearSelection();//清除选中样式(蓝色)
                            alert("复制成功")
                        })
                        clipboard.on('error', function (e) {
                            alert("复制失败")
                        });
    
                    },
    
          </script>

    2.  非  vue的 复制粘贴 ClipBoard.js使用

    <!DOCTYPE html>
    <html>
    <head>
        <title>ClipBoard.js使用:修改HTML</title>
        <meta charset="utf-8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
    </head>
    <body>
    <!--案例一:从另一元素复制文本:通过data-clipboard-target在触发器中添加属性来实现-->
    <input type="text" id="input">
    <button id="copy" data-clipboard-target="#input">复制input框中的内容</button>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    
    
    </body>
    </html>
    <script type="text/javascript">
        var clipboard = new ClipboardJS('#copy')
        // 显示用户反馈/捕获复制/剪切操作后选择的内容
        clipboard.on('success', function (e) {
            console.info('Action:', e.action)//触发的动作/如:copy,cut等
            console.info('Text:', e.text);//触发的文本
            console.info('Trigger:', e.trigger);//触发的DOm元素
            e.clearSelection();//清除选中样式(蓝色)
        })
        clipboard.on('error', function (e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });
    
    </script>

    参考链接:https://www.cnblogs.com/yangguoe/p/9682316.html

     

    clipboard.js官网链接: https://clipboardjs.com/

  • 相关阅读:
    svn的使用
    补间动画和属性动画
    图片的处理
    在Android中来修改SQL里面的权限和显示内容
    两种Service如何一起使用
    HDU-1083
    HDU 2444
    HDU-1045 Fire Net
    hrbust
    UVA
  • 原文地址:https://www.cnblogs.com/520BigBear/p/13912967.html
Copyright © 2011-2022 走看看