实现思路: 监听输入框的按键和点击活动(移动光标无非就是靠点击或方向键移动), 实时记录光标位置(使用浏览器的Range接口
)即保存到一个变量; 中途可能去组其他操作, 当需要在之前记录的光标后面插入内容时,使用之前的变量即可. 具体实现如下
let range = null; //存储光标位置变量
//为在输入框中的点击绑定事件
$(document).on('click', '[data-type=comment_box]', function (e) {
storageRange(e);
});
//为在输入框中有有操作键盘上的方向键时绑定事件
$(document).on('keydown', '[data-type=comment_box]', function (e) {
if ([37, 38, 39, 40].indexOf(e.keyCode) >= 0) {
storageRange(e);
}
});
/**
* @param e
* 记录光标位置对象
*/
function storageRange(e) {
range = document.getSelection().getRangeAt(0);
}
/**
* 可在任何时候调用此函数, content为传入的内容, 具体插入什么标签需要自己实现, 必须使用document.createElement()方法创建出来的节点才插入成功
* 在光标后插入内容
*/
function insertContent(content){
//此处以插入a标签为例子
let a = document.creat