vue获取+设置光标位置光标定位选择输入框文本

最新推荐文章于 2024-02-19 19:15:54 发布

QQ4770851

最新推荐文章于 2024-02-19 19:15:54 发布

阅读量6.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/jeesr/article/details/129278578

前端专栏收录该内容

20 篇文章

订阅专栏

文章介绍了在Vue2和Vant2环境下，由于van-field组件不支持直接设置光标，因此可以通过`this.$refs`来间接获取inputDOM元素，然后使用`setSelectionRange()`方法来设置光标位置。示例代码展示了如何在输入框中点击按钮后自动添加@qq.com并定位光标。

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

版本：vue2、vant2
在vue是用ref、 $re f s 获取 d o m 的，在 v an t 框架里 v an - f i e l d 是输入框组件，它不支持直接设置光标的方法 se tS e l ec t i o n R an g e () ，所以通过 t hi s .$ refs.be.$refs.input获取到input这个原生dom，再对其使用设置光标：

<van-field label="邮 箱" v-model.trim="buyerEmail" ref="be" placeholder="电子邮箱" clearable></van-field>

<script>
export default {
methods: {
  //我这里实现的是点击按钮自动在输入框后面加上@qq.com
  fillEmail(a){
    let em = this.buyerEmail ? this.buyerEmail : '';
    this.buyerEmail = em + a;
    let d = this.$refs.be.$refs.input; //获取dom
    this.$refs.be.focus();//设置焦点
    this.$nextTick(() => { //必需
    	//setSelectionRange两个参数是光标的起、止位置
    	//设置一样就是闪烁光标，不一样就是选择文本
    	//这里我是选择@前的内容
        d.setSelectionRange(0, this.buyerEmail.indexOf('@')); 
        console.log(d.selectionStart) //获取光标起始位置
        console.log(d.selectionEnd) //获取光标结束位置
    })
  },
}
}
<script>