Html5剪切板功能的实现代码

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<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中的文本

1 2 3 4 5 6 7 8 9 10 11

<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>

3、Vue框架提供的剪切板插件    vue-clipboard2

1 2 3 4 5

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

Sample1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<div id="app"></div>     <template id="t">   <div 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>   </div> </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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<div id="app"></div>     <template id="t">   <div class="container">   <input type="text" v-model="message">   <button type="button" @click="doCopy">Copy!</button>   </div> </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>