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

这篇具有很好参考价值的文章主要介绍了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框架里vanfield是输入框组件,它不支持直接设置光标的方法setSelectionRange(),所以通过this.refs.be.$refs.input获取到input这个原生dom,再对其使用设置光标:文章来源地址https://www.toymoban.com/news/detail-595829.html

<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>

到了这里,关于vue获取+设置光标位置 光标定位 选择输入框文本的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包