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获取光标位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了form 表单验证是异步问题记录,通过实例代码介绍了Promise.all 和 Promise.allSettled 区别，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了基于iview-admin实现动态路由的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了Element Steps步骤条的使用方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了VueJS 组件参数名命名与组件属性转化问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-12-12
vue在mounted中window.onresize不生效问题及解决
这篇文章主要介绍了vue中在mounted中window.onresize不生效问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在组件实例中，Vue提供了相应的属性，包括$parent、$children、$refs和$root，这些属性都挂载在组件的this上。本文将详细介绍Vue组件实例间的直接访问,需要的朋友可以参考下2017-08-08
这篇文章主要为大家详细介绍了vue实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了vue 自定义icon的图标的步骤，文中大概给大家分为两步骤，通过实例图文相结合给大家介绍的非常详细,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了基于vue的video播放器的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了如何使用vue-router插件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论