Html5剪切板功能的实现

最近使用Vue开发Line(日韩的一款类似中国微信平台)的内嵌H5.里面的有一个需求就是将当前链接粘贴，然后发送到pc端，在电脑上进行打开。所有搜集找到了一下几种情况：

1.不带input输入框的原生js方法

这种情况适用于复制非输入框中的文本到剪切板

     h1 id="content">
    被复制的内容/h1>
         button id="button">
    点击复制/button>
         script>
        (function(){
            button.addEventListener('click', function(){
                    VAR copyDom = document.querySelector('#content');
                    //创建选中范围                var range = document.createRange();
                    range.selectNode(copyDom);
                    //移除剪切板中内容                window.getSelection().removeAllRanges();
                    //添加新的内容到剪切板                window.getSelection().addRange(range);
                    //复制                var successful = document.execCommand('copy');
                try{
                        var msg = successful ? "successful" : "failed";
                        alert('Copy command was : ' + msg);
                }
 catch(err){
                        alert('Oops , unable to copy!');
                }
            }
)        }
    )()    /script>
    

2.带输入框的原生js方法

用于复制input，textarea中的文本

    input tyPE="text" id="input" value="17373383">
     br>
        button type="button" id="button">
    复制输入框中内容/button>
        script>
        (function(){
            button.addEventListener('click', function(){
                    input.select();
                    document.execCommand('copy');
                    alert('复制成功');
            }
)        }
    )()    /script>
    

这种方法也可以进行延深，充当和方法1一样的用途。动态创建一个input输入框，将其内容置为想复制的内容，最后在将其移除或者隐藏即可。

3.js复制内容到剪贴板插件（clipboard.js）

clipboard.js官网
clipboard.js CDN地址

引用方式：
NPM npm install --save clipboard
CDN script src="https://cdn.bootcss.COM/clipboard.js/2.0.1/clipboard.js"> /script>

                !--默认是截取.BTn中的 data-clipboard-text的属性值-->
                    !-- button class="btn" data-clipboard-text="3">
    Copy/button>
     -->
                                    !--截取input输入框中的值-->
                    input id="foo" value="https://gIThub.com/zenorocha/clipboard.js.git">
                                !-- Trigger -->
                    button class="btn" data-clipboard-target="#foo">
                        img src="assets/clippy.svg" alt="Copy to clipboard">
                    /button>
                                script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js">
    /script>
                                script>
                                                       var clipboard = new ClipboardJS('.btn');
                                        clipboard.on('success', function (e) {
                            console.LOG(e);
                    }
    );
                    clipboard.on('error', function (e) {
                            console.log(e);
                    }
    );
                                        /script>
    

里面还有很多高级用法,可以前往官网逻辑更多细节 Clipboard官网

4. Vue框架提供的剪切板插件 vue-clipboard2

    import Vue From 'vue'    import VueClipboard from 'vue-clipboard2'         VueClipboard.config.autoSetContainer = true // add this line    Vue.use(VueClipboard)

Sample1

    p id="app">
    /p>
             template id="t">
          p class="container">
            input type="text" v-model="message">
            button type="button"          v-clipboard:copy="message"          v-clipboard:success="onCopy"          v-clipboard:error="onError">
    Copy!/button>
          /p>
        /template>
            script>
    new Vue({
      el: '#app',      template: '#t',      data: function () {
        return {
          message: 'Copy These Text'        }
      }
,      methods: {
        onCopy: function (e) {
          alert('You just copied: ' + e.text)        }
,        onError: function (e) {
          alert('Failed to copy texts')        }
      }
    }
    )    /script>
    

Sample2

      p id="app">
    /p>
               template id="t">
            p class="container">
            input type="text" v-model="message">
            button type="button" @click="doCopy">
    Copy!/button>
            /p>
          /template>
               script>
      new Vue({
        el: '#app',        template: '#t',        data: function () {
          return {
            message: 'Copy These Text'          }
        }
,        methods: {
          doCopy: function () {
            this.$copyText(this.message).then(function (e) {
              alert('Copied')              console.log(e)            }
, function (e) {
              alert('Can not copy')              console.log(e)            }
)          }
        }
      }
    )      /script>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何通过HTML5触摸事件实现移动端简易进度条

Html5移动端获奖无缝滚动动画实现

html5 touch事件实现触屏页面上下滑动

以上就是Html5剪切板功能的实现的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！