vue複製textarea文字域內容到貼上板
阿新 • • 發佈:2020-10-29
1.這是我寫的專案用到的程式碼
<template> <textarea ref="letters" @click="copyToClipboard('letters')" readonly="readonly" autocomplete="off" maxlength="99999" class="el-textarea__inner" style="resize: none; min-height: 75px; height: 75px;" > https://spl438.wx.lppoll.com/act?act=27944 </textarea> </template>
data() { return { loading: false } },
methods:{//複製內容到貼上板 copyToClipboard(elemRef) { let target; let succeed = false; if(this.$refs[elemRef]){ target = this.$refs[elemRef]; // 選擇內容 let currentFocus = document.activeElement; target.focus(); target.setSelectionRange(0, target.value.length);// 複製內容 try { succeed = document.execCommand("copy"); alert("內容複製成功"); } catch (e) { succeed = false; } // 恢復焦點 if (currentFocus && typeof currentFocus.focus === "function") { currentFocus.focus(); } } return succeed; } }
這是參考文件
vue實現複製內容到貼上板 方案:找到textarea物件(input同樣適用),獲取焦點,選中textarea的所有內容,並呼叫document.execCommand("copy") 實現程式碼:<template> <div> <textarea ref="letters"></textarea> <button @click="copyToClipboard('letters')">複製</button> </div> </template> <script> export default { data() { return { loading: false } }, created() { this.$nextTick(function () { this.$refs.letters.value = '使用者名稱:張三\n性別:男\n電話號碼:15812322222'; }) }, methods: { //複製內容到貼上板 copyToClipboard(elemRef) { let target; let succeed = false; if(this.$refs[elemRef]){ target = this.$refs[elemRef]; // 選擇內容 let currentFocus = document.activeElement; target.focus(); target.setSelectionRange(0, target.value.length); // 複製內容 try { succeed = document.execCommand("copy"); alert("內容複製成功"); } catch (e) { succeed = false; } // 恢復焦點 if (currentFocus && typeof currentFocus.focus === "function") { currentFocus.focus(); } } return succeed; }, } } </script>
參考文件地址:https://www.cnblogs.com/yeqrblog/p/9571129.html