Implementation of Html5 clipboard function

This article mainly introduces the implementation code of the Html5 clipboard function. The content is quite good. I will share it with you now and give it as a reference.

Vue was recently used to develop the embedded H5 of Line (a Japanese and Korean platform similar to China's WeChat). One of the requirements is to paste the current link, then send it to the PC and open it on the computer. After all the collection, I found several situations:

1. Native js method without input box

This situation is suitable for copying non-input boxes to the clipboard

     <h1 id="content">被复制的内容</h1>
     <button id="button">点击复制</button>

     <script>
        (function(){
            button.addEventListener(&#39;click&#39;, function(){
                var copyDom = document.querySelector(&#39;#content&#39;);
                //创建选中范围
                var range = document.createRange();
                range.selectNode(copyDom);
                //移除剪切板中内容
                window.getSelection().removeAllRanges();
                //添加新的内容到剪切板
                window.getSelection().addRange(range);
                //复制
                var successful = document.execCommand(&#39;copy&#39;);

                try{
                    var msg = successful ? "successful" : "failed";
                    alert(&#39;Copy command was : &#39; + msg);
                } catch(err){
                    alert(&#39;Oops , unable to copy!&#39;);
                }
            })
        })()
    </script>

2. Native js method with input box

for copying The text in input, textarea

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

This method can also be extended and serves the same purpose as method 1. Dynamically create an input box, set its content to the content you want to copy, and finally remove or hide it.

3.js copy content to clipboard plug-in (clipboard.js)

clipboard.js official website
clipboard.js CDN address

Quote:
NPM npm install --save clipboard<br/>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(&#39;.btn&#39;);
                    
                    clipboard.on(&#39;success&#39;, function (e) {
                        console.log(e);
                    });
                    clipboard.on(&#39;error&#39;, function (e) {
                        console.log(e);
                    });
                    
                </script>

There are many advanced usages, you can go to the official website logic for more details Clipboard official website

4 . Clipboard plug-in provided by the Vue framework 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: &#39;#app&#39;,
      template: &#39;#t&#39;,
      data: function () {
        return {
          message: &#39;Copy These Text&#39;
        }
      },
      methods: {
        onCopy: function (e) {
          alert(&#39;You just copied: &#39; + e.text)
        },
        onError: function (e) {
          alert(&#39;Failed to copy texts&#39;)
        }
      }
    })
    </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: &#39;#app&#39;,
        template: &#39;#t&#39;,
        data: function () {
          return {
            message: &#39;Copy These Text&#39;
          }
        },
        methods: {
          doCopy: function () {
            this.$copyText(this.message).then(function (e) {
              alert(&#39;Copied&#39;)
              console.log(e)
            }, function (e) {
              alert(&#39;Can not copy&#39;)
              console.log(e)
            })
          }
        }
      })
      </script>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to implement a simple progress bar on the mobile terminal through HTML5 touch events

Html5 mobile terminal is award-winning and seamless Scroll animation implementation

html5 touch event implements sliding up and down the touch screen page

##

The above is the detailed content of Implementation of Html5 clipboard function. For more information, please follow other related articles on the PHP Chinese website!