前端复制粘贴文字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/
那时候我只有一台录音机也没有电脑 也不敢奢求说唱会让自己的生活变好