需求复现
点击某一个列表模板,填充到文本框中(已实现),文本框自动选中第一个被()括起来的文字,修改完第一个被()括起来的文字,点击空格键跳选中下一个被()括起来的文字,并实现修改,直至全部修改完。
代码实现
直接上代码:
<el-input
ref="ModelInput"
@focus="handleCursorPosition"
@keyup.space.native="keyDownFunction"
v-show="inputChangeFlag == false"
type="textarea"
class="inputModel"
:rows="5"
placeholder="请输入内容"
v-model="form.content"
>
</el-input>
// 处理鼠标位置
handleCursorPosition(e) {
// start:获取所有的被()括起来的字符串,并将他们全部存放在数组中
let a1 = /\((.+?)\)/g; //正则获取小括号
let a2 = this.form.content.match(a1).toString(); //因为输出的是数组,所以得转化成字符串
let arrStr = a2.split(",");
arrStr.forEach((item) => {
this.strNum.push(item.length - 1);
});
// end:获取所有的被()括起来的字符串,并将他们全部存放在数组中
// start:判断第一次(左括号出现的位置,并且将光标开始定位到(的位置,光标结束定位到)右括号的位置。
let index = this.form.content.indexOf("(", 0);
if (this.form.content.indexOf("(")) {
e.srcElement.selectionStart = index + 1;
e.srcElement.selectionEnd = index + Number(this.strNum[0]);
}
// end:判断第一次(左括号出现的位置,并且将光标开始定位到(的位置,光标结束定位到)右括号的位置。
},
// 当space键按下触发的事件
keyDownFunction(e) {
// 记录光标结束的位置
let cursorEnd = e.srcElement.selectionEnd;
// 从头删除记录字符串的数组
this.strNum.unshift();
// 如果数组长度大于0,则判断下一个(左括号的位置
if (this.strNum.length > 0) {
let index = this.form.content.indexOf("(", cursorEnd + 1);
// 重新定位光标位置,实现修改文字功能
e.srcElement.selectionStart = index + 1;
e.srcElement.selectionEnd = index + Number(this.strNum[this.num]);
this.num = this.num + 1;
} else {
this.num = 1;
}
},