实现输入框中记录光标位置,让后续的操作可在记录光标后面插入内容

实现思路: 监听输入框的按键和点击活动(移动光标无非就是靠点击或方向键移动), 实时记录光标位置(使用浏览器的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.createElement('a');
        a.setAttribute('href', '/php_is_the_best_language_on_earth.php');
        a.text = content;
        range.insertNode(a);
        //此处在举一个插入文字的例子
        let text = document.createTextNode(content);
        range.insertNode(text);
      
    }
    
    

 

参考文档:

官方文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Range#%E6%9E%84%E9%80%A0%E5%99%A8

range用法详解: https://developer.mozilla.org/zh-CN/docs/Web/API/Range#%E6%9E%84%E9%80%A0%E5%99%A8