vue获取+设置光标位置 光标定位 选择输入框文本
是输入框组件，它不支持直接设置光标的方法。版本：vue2、vant2。在vue是用ref、
版本：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，再对其使用设置光标：
<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>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献7条内容
所有评论(0)