vue设置光标位置可指定位置

js设置光标位,可指定光标所在位置。必根据需求自定义光标位置

获取光标位置

   getCursortPosition (event) { // 获取光标位置
      let ctrl = event.target
      let CaretPos = 0 // IE Support
      if (document.selection) {
        ctrl.focus()
        var Sel = document.selection.createRange()
        Sel.moveStart('character', ctrl.value.length)
        CaretPos = Sel.text.length
      } else if (ctrl.selectionStart || ctrl.selectionStart === '0') {
        CaretPos = ctrl.selectionStart
      }
      console.log(CaretPos)
      return (CaretPos)
    }

设置光标位置 vue需要在this.$nextTick(() => {})下setSelectionRange才能生效

setCaretPosition (event, pos) { // 设置光标位置
      this.$nextTick(() => {
        let ctrl = event.target
        if (ctrl.setSelectionRange) {
          ctrl.focus()
          ctrl.setSelectionRange(pos, pos)
        } else if (ctrl.createTextRange) {
          var range = ctrl.createTextRange()
          range.collapse(true)
          range.moveEnd('character', pos)
          range.moveStart('character', pos)
          range.select()
        }
      })
    }

定位光标

    dealKeyup (event) { // 光标定位
        let value = '设置自动定到@位置上' //
        let index = value.indexOf('@')
        // let str = value.replace('_', '')
        this.setCaretPosition(event, index) //设置自动定到@位置上
    },