vue input获取光标位置,并追加内容

这篇具有很好参考价值的文章主要介绍了vue input获取光标位置,并追加内容。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目中需要实现在输入框内的任意位置,追加内容,这里通过input的selectionStart属性还有setSelectionRange方法来实现。

首先来看selectionStart属性,用于获取文本框选区的开始位置,selectionEnd用于获取文本框选区结束的位置,举个栗子:

vue获取input光标位置,vue.js,前端,javascript,Powered by 金山文档
vue获取input光标位置,vue.js,前端,javascript,Powered by 金山文档

在该功能中,我们不是选择文字,主要是需要获取光标的位置,不选中文字时selectionStart和selectionEnd属性的值是一样的。

再看setSelectionRange方法,它也是作用在input元素上的,可以通过设置起始和终止位置,来选中一段文本中的一部分,inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection),还可以选择方向。当起始位置和终止位置一样时,就相当于是改变输入框中光标的位置了。

看一下具体实现:

vue获取input光标位置,vue.js,前端,javascript,Powered by 金山文档
vue获取input光标位置,vue.js,前端,javascript,Powered by 金山文档

代码如下:

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获取的元素节点,或者通过原生获取的节点,当我们想要查看元素节点的属性时,可以通过这三个方法查看:

  1. 包数组:console.log([dom])

  1. 包对象:console.log({dom})

  1. 使用console.dir打印,可以打印出该对象的所有属性和属性值。文章来源地址https://www.toymoban.com/news/detail-568912.html

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

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

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

相关文章

  • 在JavaScript中添加css样式 js追加类

    一、原生js中添加类的方法 二、jquery中添加类的方法 三、检查是否含有某个类的方法 四、在JavaScript中添加CSS样式: 五、使用HTML DOM的setAttribute()方法更改CSS属性: 六、使用JavaScript可以通过动态创建样式表 style标签 来添加CSS样式。 例如,以下代码创建一个新的style标签,并

    2024年02月03日
    浏览(55)
  • js获取光标坐标

    方法一: 使用事件对象的clientX和clientY属性获取光标坐标: 方法二: 使用getBoundingClientRect()方法获取目标元素的位置信息:

    2024年01月22日
    浏览(43)
  • Android WebView 获取html页面聚焦input在页面的位置

    Android WebView 获取html页面聚焦input在页面的位置,实现代码如下: 注意: WebView 要设置setJavaScriptEnabled支持JavaScript调用 返回的数值是以dp为单位,使用时需要转换为像素px

    2024年02月15日
    浏览(52)
  • 前端Vue自定义签到积分获取弹框抽取红包弹框 自定义弹框内容 弹框顶部logo

    前端组件化开发:以cc-downloadDialog组件为例 随着技术的发展,开发的复杂度也越来越高。传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现

    2024年02月11日
    浏览(50)
  • js获取input?

    在JavaScript中,获取输入框(通常指的是HTML的 input 元素)的值有多种方法。以下是其中的一些: 通过ID获取: 这里,\\\'inputId\\\' 是你的输入框的ID。 通过Name获取: 这里,\\\'inputName\\\' 是你的输入框的Name。请注意,这会返回一个元素集合,因此我们使用  [0]  来获取第一个元素。 通

    2024年02月08日
    浏览(30)
  • JavaScript基础语法02——JS书写位置

    哈喽,大家好,我是雷工! 今天继续学习JavaScript基础语法,JS的书写位置,俗话说:好记性不如烂笔头,边学边记,方便回顾。 代码写在标签内部 示例: 2.1、要将JS代码直接写在HTML文件里面。 2.2、在HTML文件中添加一个script,用script标签包住,script标签中的代码就是JS代码

    2024年02月10日
    浏览(42)
  • Vue 中input 点击复制其内容

    Element UI中el-input 组件 ,一般使用情况: el-input 添加点击事件,这样添加点击事件是无效的: 正确的写法,需要使用v-on的修饰符.native,@click.native: data: 在methods方法中,添加触发点击: 触发后,直接Ctrl+v/鼠标右击粘贴(就会显示复制的内容)!

    2024年02月16日
    浏览(30)
  • js 正则表达式 限制input元素内容必须以abc开头,123结尾

    要通过正则表达式验证一个输入元素的内容是否以\\\"abc\\\"开头且以\\\"123\\\"结尾,您可以使用 ^ 表示开头, $ 表示结尾,以及适当的字符类或具体字符。以下是一个示例正则表达式: 上面的正则表达式将匹配以\\\"abc\\\"开头,以\\\"123\\\"结尾的任何字符串,其中 .* 表示匹配零个或多个任意字符

    2024年02月13日
    浏览(38)
  • javascript获取设置输入框内容

    代码, 运行如下;  单击按钮;    

    2024年02月13日
    浏览(50)
  • 原生js获取元素的各种位置(大全)

    加给元素: offsetLeft (距离定位父级的距离) offsetTop (距离定位父级的距离) offsetWidth (可视宽度) offsetHeight (可视高度) clientLeft (左边框宽度) clientTop (上边框宽度) clientWidth(width + padding) clientHeight(height + padding) scrollTop(纵向滚动距离) scrollLeft(横向滚动距

    2024年02月02日
    浏览(39)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包