jquery在光标处插入文本值

Html

Css

div {
	width:300px;
	height:50px;
	border:1px solid #eeeeee;
}

/**
 * 在当前光标处插入值
 * @param text {String} 需要插入的值
 * @param delLength {Number} 需要删除的字符长度
 */
$.fn.Content = function(text, delLength) {
    let el = $(this)[0];
    el.focus();
    let sel, range;
    if (window.getSelection && document.createRange) {
        sel = window.getSelection();
        if (sel.type === 'Range') {
            document.execCommand('');
        }

range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(true);

//获取光标当前集中的节点
        let activeNode = window.getSelection().anchorNode;
        range.setStart(activeNode, window.getSelection().anchorOffset);
        range.setEnd(activeNode, window.getSelection().anchorOffset);
        let div = document.createElement("div");
        div.innerHTML = text;
        let nodeList = [];

while (div.childNodes.length > 0) {
            activeNode = div.childNodes[0];
            range.Node(activeNode);
            range.setStartAfter(activeNode);
            nodeList.push(activeNode);

if (activeNode.nodeType === 1) {
                autoTask(activeNode.tagName === 'IMG' ? [activeNode] : $(activeNode).find('img'));
            }
        }
        if (delLength > 0) {
            activeNode.nodeValue = activeNode.nodeValue.substr(0, activeNode.nodeValue.length - delLength);
        }

sel.removeAllRanges();
        sel.addRange(range);

// 自动聚焦
        $(this).scrollToFocus();

return $(nodeList);
    } else if (document.body.createTextRange) {
        //暂未实现
    }
    return false;
};

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jquery在光标处插入文本值



代码描述：光标处插入文本

更新时间：2020-06-29 08:45:59
可以给jquery扩展该方法content，也可以自己定义个方法，都可以，最终目的是在光标处插入值

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

kimi-小星星

相关代码

jquery在光标处插入文本值

最新