h5实现复制文本功能

2020-04-02  本文已影响0人  suesoft
<p>{{text}}</p>
<div @click="copeText()"></div>
data() {
    return { 
      text: '我是复制文本'
    }
},
methods: {
    copeText() {
      // 数字没有 .length 不能执行selectText 需要转化成字符串
      const textString = this.text.toString()
      let input = document.querySelector('#copy-input')
      if (!input) {
        input = document.createElement('input')
        input.id = 'copy-input'
        input.readOnly = 'readOnly'   // 防止ios聚焦触发键盘事件
        input.style.position = 'absolute'
        input.style.left = '-1000px'
        input.style.zIndex = '-1000'
        document.body.appendChild(input)
      }
      input.value = textString
      // ios必须先选中文字且不支持 input.select();
      this.selectText(input, 0, textString.length)
      if (document.execCommand('copy')) {
        document.execCommand('copy')
        const toast = this.$createToast({
          time: 1000,
          txt: '复制成功',
          type: 'correct'
        })
        toast.show()
      } else {
        console.log('不兼容')
      }
      input.blur()
    },
     // input自带的select()方法在苹果端无法进行选择,所以需要自己去写一个类似的方法
    // 选择文本。createTextRange(setSelectionRange)是input方法
    selectText(textbox, startIndex, stopIndex) {
        if (textbox.createTextRange) { // ie
          const range = textbox.createTextRange()
          range.collapse(true)
          range.moveStart('character', startIndex)// 起始光标
          range.moveEnd('character', stopIndex - startIndex)// 结束光标
          range.select()// 不兼容苹果
        } else { // firefox/chrome
          textbox.setSelectionRange(startIndex, stopIndex)
          textbox.focus()
        }
      }
}
上一篇 下一篇

猜你喜欢

热点阅读