elementui input输入框获取光标方法

最新推荐文章于 2024-07-17 14:47:00 发布

酸菜鱼很好吃哦1

最新推荐文章于 2024-07-17 14:47:00 发布

阅读量2.3k

点赞数 1

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/m0_50663823/article/details/125737931

版权

本文介绍了在Vue.js中如何使用ref和onblur事件处理输入框的光标位置，并展示了如何实现一个功能，即在光标处动态插入括号。通过`inputBlur`函数获取光标位置，并在`handleAddField`方法中判断并插入括号，实现了文本编辑的增强功能。

摘要由CSDN通过智能技术生成

1、定义ref值和onblur函数

 <el-input type="textarea" ref="inputRef" @blur="inputBlur" autosize v-model="measureDataForm.measuresDesc" placeholder="请输入措施描述" clearable :style='{"width":"74%"}'>
          </el-input>

2、获取光标函数

//获取光标
    inputBlur() {
	    this.textCursor = this.$refs.inputRef.$el.children[0].selectionStart;
    },
    //新增括号按钮
    handleAddField() {
      if(this.measureDataForm.measuresDesc[this.textCursor]!=undefined){
        this.measureDataForm.measuresDesc = this.measureDataForm.measuresDesc.slice(0,this.textCursor) + '( )' + this.measureDataForm.measuresDesc.slice(this.textCursor)
      }
      
    }