input输入框失去焦点时获取光标位置并插入内容
<el-input @blur="blur" :rows="5" v-model="messageForm.content" type="textarea" maxlength="100" show-word-limit placeholder="请输入你的留言"></el-input>
data() { return { cursorIndexStart: null,//光标选中开始的位置 cursorIndexEnd: null,//光标选中结束的位置 } },
blur(e){ this.cursorIndexStart = e.srcElement.selectionStart // 获取input输入框失去焦点时光标选中开始的位置 this.cursorIndexEnd = e.srcElement.selectionEnd // 获取input输入框失去焦点时光标选中结束的位置 },
//在光标处插入数据 output(val) { if (this.cursorIndexStart !== null && this.messageForm.content) { //如果 文本域获取了焦点, 则在光标位置处插入对应字段内容 this.messageForm.content = this.messageForm.content.substring(0, this.cursorIndexStart) + val + this.messageForm.content.substring(this.cursorIndexEnd) } else { // 如果 文本域未获取焦点, 则在字符串末尾处插入对应字段内容 this.messageForm.content = this.messageForm.content?this.messageForm.content:'' + val } },