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中keep-alive的两种应用方式，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了解决vue无法侦听数组及对象属性的变化问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了JavaScript实现简易折叠面板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了vue路由前进后退动画效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-12-12
下面小编就为大家分享一篇vue 全选与反选的实现方法(无Bug 新手看过来)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue中的v-if和v-show的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了vue parseHTML函数源码解析之析器遇到结束标签的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家详细介绍了Vue实现倒计时小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
Vue SPA单页面应用对SEO不友好，当然也有相应的解决方案，通过查找资料，大概有以下4种方法，本文就详细的介绍一下2021-10-10
这篇文章主要为大家详细介绍了vue分割面板封装实现记录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论