el-input @focus设置光标位置

文章讨论了在Vue.js中使用el-input组件时如何管理焦点和光标位置。通过@focus和@blur事件处理函数,可以设置setSelectionRange来改变光标位置。然而,当用户手动点击输入框或其他方式交互时,设置的光标位置可能会被覆盖。作者寻求解决方案以确保光标位置在特定条件下保持不变。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

关于el-input获取焦点失去焦点时光标位置可以使用@focus方法;

 随便写个el-input,设置ref、focus、blur属性和方法。

        <el-input
          ref="inputRef"
          v-model="testFocus"
          placeholder="请输入..."
          @focus="getCursor"
          @blur="inputBlur"
        >
          <template slot="prepend">前缀文字</template>
          <template slot="append">后缀文字</template>
        </el-input>

 获取焦点时设置光标范围(2, 4)

setSelectionRange()

HTMLInputElement.setSelectionRange 方法用于设定<input> 或 <textarea> 元素中当前选中文本的起始和结束位置。

属性含义
selectionStart起始位置
selectionEnd结束位置
selectionDirectionforward、backward、none,三种选择方向,默认为forward从前向后
methods: {
    inputBlur() {
    // 失去焦点是输出光标所在位置
      const textCursorStart = this.$refs.inputRef.$el.children[0].selectionStart;
      const textCursorEnd = this.$refs.inputRef.$el.children[0].selectionEnd;
      console.log(textCursorStart, textCursorEnd)
    },
    getCursor(event) {
      console.log(event)
      // 把光标移动input默认值的最后
      // event.target.setSelectionRange(this.position.length, this.position.length)
      // 设置光标范围(起始位置,结束位置,)
      event.target.setSelectionRange(2, 4)
    }
}

setSelectionRange设置的光标范围是(2, 4)是生效的,但鼠标如果点击了input其他位置会覆盖这个设置,例如点击最后的位置,会使(2, 4)变成了(2, 9)


当我从下一个input,按键盘shift+tab反选这个input的时候,就发现选中(2, 4)了

所以这种方法仅在鼠标不点击input的时候好用,如果大佬能解决这个问题,记得回复我一下,感谢! 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值