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

• 前端

版本：vue2、vant2

在vue是用ref、

r

e

f

s

获取

d

o

m

的，在

v

a

n

t

框架里

v

a

n

−

f

i

e

l

d

是输入框组件，它不支持直接设置光标的方法

s

e

t

S

e

l

e

c

t

i

o

n

R

a

n

g

e

(

)

，所以通过

t

h

i

s

.

refs获取dom的，在vant框架里van-field是输入框组件，它不支持直接设置光标的方法setSelectionRange()，所以通过this.

refs获取dom的，在vant框架里van−field是输入框组件，它不支持直接设置光标的方法setSelectionRange()，所以通过this.refs.be.$refs.input获取到input这个原生dom，再对其使用设置光标：



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) //获取光标结束位置
    })
  },
}
}

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/4996b87797.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐