900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > vue获取+设置光标位置 光标定位 选择输入框文本

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

时间:2022-08-21 07:29:07

相关推荐

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,再对其使用设置光标:

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。