美文网首页
h5实现复制文本功能

h5实现复制文本功能

作者: suesoft | 来源:发表于2020-04-02 21:22 被阅读0次
<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()
        }
      }
}

相关文章

网友评论

      本文标题:h5实现复制文本功能

      本文链接:https://www.haomeiwen.com/subject/qeucyhtx.html