1. 程式人生 > 實用技巧 >vue複製textarea文字域內容到貼上板

vue複製textarea文字域內容到貼上板

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