版本：vue2、vant2
在vue是用ref、
r
e
f
s
獲取
d
o
m
的，在
v
a
n
t
框架里
v
a
n
?
f
i
e
l
d
是輸入框組件，它不支持直接設(shè)置光標(biāo)的方法
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是輸入框組件，它不支持直接設(shè)置光標(biāo)的方法setSelectionRange()，所以通過this.
refs獲取dom的，在vant框架里van?field是輸入框組件，它不支持直接設(shè)置光標(biāo)的方法setSelectionRange()，所以通過this.refs.be.$refs.input獲取到input這個(gè)原生dom，再對(duì)其使用設(shè)置光標(biāo)：文章來源地址http://www.zghlxwxcb.cn/news/detail-595829.html
<van-field label="郵 箱" v-model.trim="buyerEmail" ref="be" placeholder="電子郵箱" clearable></van-field>
<script>
export default {
methods: {
//我這里實(shí)現(xiàn)的是點(diǎn)擊按鈕自動(dòng)在輸入框后面加上@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();//設(shè)置焦點(diǎn)
this.$nextTick(() => { //必需
//setSelectionRange兩個(gè)參數(shù)是光標(biāo)的起、止位置
//設(shè)置一樣就是閃爍光標(biāo)，不一樣就是選擇文本
//這里我是選擇@前的內(nèi)容
d.setSelectionRange(0, this.buyerEmail.indexOf('@'));
console.log(d.selectionStart) //獲取光標(biāo)起始位置
console.log(d.selectionEnd) //獲取光標(biāo)結(jié)束位置
})
},
}
}
<script>
文章來源：http://www.zghlxwxcb.cn/news/detail-595829.html
到了這里，關(guān)于vue獲取+設(shè)置光標(biāo)位置 光標(biāo)定位 選擇輸入框文本的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
