vue中input获取光标位置并追加内容
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
项目中需要实现在输入框内的任意位置,追加内容,这里通过input的selectionStart属性还有setSelectionRange方法来实现。
首先来看selectionStart属性,用于获取文本框选区的开始位置,selectionEnd用于获取文本框选区结束的位置,举个栗子:
在该功能中,我们不是选择文字,主要是需要获取光标的位置,不选中文字时selectionStart和selectionEnd属性的值是一样的。
再看setSelectionRange方法,它也是作用在input元素上的,可以通过设置起始和终止位置,来选中一段文本中的一部分,inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection),还可以选择方向。当起始位置和终止位置一样时,就相当于是改变输入框中光标的位置了。
看一下具体实现:
代码如下:
1 2 3 4 5 6 7 8 9 10 | async insertContent(val){ let dom = this .$refs.textareaI.$refs.textarea; // console.dir(dom); let index = dom.selectionStart; let contont = dom.value; this .textarea = contont.substring(0,index) + val + contont.substring(index,contont.length) await this .$nextTick(); dom.focus(); dom.setSelectionRange(index + val.length,index + val.length) }, |
需要注意几点:一定要等到dom更新完成后再去改变光标的位置;
再讲一个小tips:
不论是vue中ref获取的元素节点,或者通过原生获取的节点,当我们想要查看元素节点的属性时,可以通过这三个方法查看:
- 包数组:console.log([dom])
- 包对象:console.log({dom})
- 使用console.dir打印,可以打印出该对象的所有属性和属性值。
总结
到此这篇关于vue中input获取光标位置并追加内容的文章就介绍到这了,更多相关vue input获取光标位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
最新评论