文本框添加表情、指定光标位置插入元素

最新推荐文章于 2024-10-01 20:12:28 发布

PanDa____

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量490

点赞数 11

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/panda____/article/details/136344581

版权

本文介绍了JavaScript函数`chooseFace`和`common.insertHtmlAtCaret`，用于在用户聚焦文本框时动态插入图片，并保持光标位置。涉及了浏览器SelectionAPI和DOM操作以实现精确插入和光标管理。

摘要由CSDN通过智能技术生成

<!--文本框-->
<div class="div-enter-textarea" contenteditable="true"></div>

//选择表情事件
function chooseFace(){
    var facehtml = '<img ctag="face" src="../images/smile.png"  />';
    $('.div-enter-textarea').focus();  //文本框获取焦点
     _util.common.insertHtmlAtCaret(facehtml);
};

    //在指定光标位置插入元素
    u.common.insertHtmlAtCaret = function (str, currRange) {
        var selection = window.getSelection
            ? window.getSelection()
            : document.selection;
        if (currRange) {
            // 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
            selection.removeAllRanges();
            selection.addRange(currRange);
        }
        var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
        if (!window.getSelection) {
            var selection = window.getSelection
                ? window.getSelection()
                : document.selection;
            var range = selection.createRange
                ? selection.createRange()
                : selection.getRangeAt(0);
            range.pasteHTML(str);
            range.collapse(false);
            range.select();
        } else {
            var hasR = range.createContextualFragment(str);
            var hasR_lastChild = hasR.lastChild;
            while (
                hasR_lastChild &&
                hasR_lastChild.nodeName.toLowerCase() == 'br' &&
                hasR_lastChild.previousSibling &&
                hasR_lastChild.previousSibling.nodeName.toLowerCase() == 'br'
            ) {
                var e = hasR_lastChild;
                hasR_lastChild = hasR_lastChild.previousSibling;
                hasR.removeChild(e);
            }
            range.insertNode(hasR);
            if (hasR_lastChild) {
                range.setEndAfter(hasR_lastChild);
                range.setStartAfter(hasR_lastChild);
            }
            range.collapse(false);
            selection.removeAllRanges();
            selection.addRange(range);
        }
        //记录最后光标对象
        currRange = selection.getRangeAt(0);
    }