//获取光标位置//ctrl 是dom节点getCursortPosition(ctrl) {//获取光标位置函数 let CaretPos = 0;// IE Supportif (document.selection) {ctrl.focus(); // 获取焦点let Sel = document.selection.createRange(); // 创建选定区域Sel.moveStart('character', -ctrl.value.length); // 移动开始点到最左边位置CaretPos = Sel.text.length; // 获取当前选定区的文本内容长度}// Firefox support (非ie)else if (ctrl.selectionStart || ctrl.selectionStart == '0') {CaretPos = ctrl.selectionStart; // 获取选定区的开始点 }return CaretPos;},// 设置光标位置// ctrl 是dom节点，pos 是要定位到的位置setCaretPosition(ctrl, pos) {//设置光标位置函数 if (ctrl.setSelectionRange) //非ie{ctrl.focus(); // 获取焦点ctrl.setSelectionRange(pos, pos); // 设置选定区的开始和结束点}else if (ctrl.createTextRange) {let range = ctrl.createTextRange(); // 创建选定区range.collapse(true); // 设置为折叠,即光标起点和结束点重叠在一起range.moveEnd('character', pos);// 移动结束点range.moveStart('character', pos); // 移动开始点range.select(); // 选定当前区域}},
vue 调用的话 建议使用 this.$nextTick(() => this.setCaretPosition(textareaDom,Index))
//myField DOM 元素 //myValue 需要插入的文案insertAtCursor(myField, myValue) {//IE supportif (document.selection) {document.selection.empty();caretPos.text = myValue;caretPos.select();myField.focus();}//MOZILLA/NETSCAPE support else if (myField.selectionStart || myField.selectionStart == '0') {let textareaDom = document.getElementById('textareaDom');let Teacher = textareaDom.value;let startPos = myField.selectionStart;let endPos = myField.selectionEnd;console.log(startPos);console.log(endPos);// save scrollTop before insert let restoreTop = myField.scrollTop;myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);if (restoreTop > 0) {myField.scrollTop = restoreTop;}myField.focus();myField.selectionStart = startPos + myValue.length;myField.selectionEnd = startPos + myValue.length;} else {myField.value += myValue;myField.focus();}},
