vue中input获取光标位置并追加内容
更新时间：2023年07月27日 10:49:24 作者：JuS巨山超力霸
这篇文章主要给大家介绍了关于vue中input获取光标位置并追加内容的相关资料,vue通过当前的光标来进行插值,从而需要去获取光标所在的位置,需要的朋友可以参考下
项目中需要实现在输入框内的任意位置，追加内容，这里通过input的selectionStart属性还有setSelectionRange方法来实现。
首先来看selectionStart属性，用于获取文本框选区的开始位置，selectionEnd用于获取文本框选区结束的位置，举个栗子：
在该功能中，我们不是选择文字，主要是需要获取光标的位置，不选中文字时selectionStart和selectionEnd属性的值是一样的。
再看setSelectionRange方法，它也是作用在input元素上的，可以通过设置起始和终止位置，来选中一段文本中的一部分，inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection)，还可以选择方向。当起始位置和终止位置一样时，就相当于是改变输入框中光标的位置了。
看一下具体实现：
代码如下：
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获取光标位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了vue实现导入json解析成动态el-table树表格，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了Vuex的使用及知识点笔记，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
vue版本升级相信大家应该都遇到过,下面这篇文章主要给大家介绍了关于Vue版本vue2.9.6升级到vue3.0的详细步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-09-09
文章主要介绍了父子传值、兄弟传值和provide/inject三种在Vue中进行组件间通信的方法,感兴趣的朋友跟随小编一起看看吧2025-03-03
这篇文章主要介绍了在vue中配置不同的代理同时访问不同的后台操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
Vue页面内公共的多类型附件图片上传区域并适用折叠面板(示例代码)
本文中实现的附件上传区域支持超多类型附件分类型上传，并且可根据特定条件具体展示某些类型的附件上传，本文给大家分享Vue页面内公共的多类型附件图片上传区域并适用折叠面板的示例代码，需要的朋友参考下吧2021-12-12
这篇文章主要介绍了关于vue中的时间格式转化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
解决Electron store的commit和dispatch不好用问题
这篇文章主要介绍了解决Electron store的commit和dispatch不好用问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了详解vue的数据binding原理介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要介绍了Vue如何基于vue-i18n实现多国语言兼容,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
最新评论