รหัสการใช้งานของฟังก์ชันคลิปบอร์ด Html5

ล่าสุด Vue ถูกนำมาใช้เพื่อพัฒนา H5 ของ Line (แพลตฟอร์มของญี่ปุ่นและเกาหลีที่คล้ายกับ WeChat ของจีน) หนึ่งในข้อกำหนดคือการวางลิงก์ปัจจุบัน จากนั้นส่งไปยังพีซีและเปิดบนคอมพิวเตอร์ คอลเลกชันทั้งหมดพบสถานการณ์ต่อไปนี้:

สถานการณ์นี้ใช้กับการคัดลอกข้อความในกล่องที่ไม่ใช่การป้อนข้อมูลไปยังคลิปบอร์ด

 <h1 id=content>เนื้อหาที่คัดลอก</h1> <button id=button>คลิกเพื่อคัดลอก</button> <script> (function(){ button.addEventListener('click', function(){ var copyDom = document . querySelector('#content'); //สร้างช่วงที่เลือก var range = document.createRange(); //ลบเนื้อหาออกจากคลิปบอร์ด window.getSelection().removeAllRanges(); //เพิ่มเนื้อหาใหม่ลงในคลิปบอร์ด window.getSelection().addRange(range); //Copy var Successful = document.execCommand( 'copy') ; ลอง { var msg = สำเร็จ ? สำเร็จ : ล้มเหลว; alert('Copy command was : ' + msg); } catch(err){ alert('Oops , คัดลอก!'); } }) })() </script>

ใช้เพื่อคัดลอกข้อความในการป้อนข้อมูล พื้นที่ข้อความ

 <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('copy Success'); }) })() </script>

วิธีนี้สามารถขยายได้และมีจุดประสงค์เดียวกันกับวิธีที่ 1 สร้างกล่องป้อนข้อมูลแบบไดนามิก ตั้งค่าเนื้อหาเป็นเนื้อหาที่คุณต้องการคัดลอก และสุดท้ายลบหรือซ่อน

3.js คัดลอกเนื้อหาไปยังปลั๊กอินคลิปบอร์ด (clipboard.js)

เว็บไซต์อย่างเป็นทางการของ clipboard.js

ที่อยู่ CDN ของ clipboard.js

วิธีการอ้างอิง:

NPM npm install --save clipboard

CDN <script src=https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js></script>

 <!--ค่าเริ่มต้นคือการสกัดกั้นค่าแอตทริบิวต์ของ data-clipboard-text ใน .btn--> <!-- <button class=btn data-clipboard-text=3>Copy</button> --> < !- -ดักจับค่าในกล่องอินพุตอินพุต--> <input id=foo value=https://github.com/zenorocha/clipboard.js.git> <!-- Trigger --> <button class=btn data-clipboard-target=#foo> <img src=assets/clippy.svg </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); }); คลิปบอร์ด.บน('ข้อผิดพลาด', ฟังก์ชั่น (e) { console.log(e); });

มีการใช้งานขั้นสูงมากมาย คุณสามารถไปที่เว็บไซต์อย่างเป็นทางการของคลิปบอร์ดเพื่อดูรายละเอียดเพิ่มเติม

4. ปลั๊กอินคลิปบอร์ด vue-clipboard2 จัดเตรียมโดยเฟรมเวิร์ก Vue

 นำเข้า Vue จาก 'vue' นำเข้า VueClipboard จาก 'vue-clipboard2' VueClipboard.config.autoSetContainer = true // เพิ่มบรรทัดนี้ Vue.use (VueClipboard)

ตัวอย่าง1

 <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>คัดลอก!</button> </div> </template> <script> new Vue({ el: '#app', เทมเพลต: '#t', data: function () { return { ข้อความ: 'คัดลอกข้อความเหล่านี้' } }, วิธีการ: { onCopy: function (e) { alert('คุณเพิ่งคัดลอก: ' + e.text) }, onError: ฟังก์ชั่น (e) { alert('Failed to copy texts') } } }) </script>

ตัวอย่าง2

 <div id=app></div> <template id=t> <div class=container> <input type=text v-model=message> <button type=button @click=doCopy>คัดลอก!</button> < /div> </template> <script> new Vue({ el: '#app', template: '#t', data: function () { return { message: 'Copy These Text' } }, วิธีการ: { doCopy: function () { this.$copyText(this.message).then(function (e) { alert('Copied') console.log(e) }, function (e) { alert('ไม่สามารถคัดลอก') console.log(อี) }) } } }) </script>

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network