js在可编辑div中定位和设置光标

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>在可编辑div中定位和设置光标</title>
    <style>
        #editor {
            height: 300px;
            width: 580px;
            border: 1px solid #999;
            margin-bottom: 15px;
        }
    </style>
</head>
 
<body>
    <div id="editor" contenteditable></div>
    <input type="text" id="inputDom">
    <button id="sendContent">发送内容</button>
 
    <script>
        // 发送表情的按钮
        var sendContent = document.getElementById('sendContent');
        // 定义最后光标对象
        var lastEditPosition;
 
        // 编辑框点击事件
        document.getElementById('editor').onclick = function () {
            // 获取选定对象
            var selection = document.getSelection();
            // 设置最后光标对象
            lastEditPosition = selection.getRangeAt(0);
        }
 
        // 编辑框按键弹起事件
        document.getElementById('editor').onkeyup = function () {
            // 获取选定对象
            var selection = document.getSelection();
            // 设置最后光标对象
            lastEditPosition = selection.getRangeAt(0);
        }
 
        // 发送表情
        document.getElementById('sendContent').onclick = function () {
            // 获取可编辑框
            var editor = document.getElementById('editor');
            // 获取输入框
            var inputDom = document.getElementById('inputDom');
            // 编辑框获得焦点
            editor.focus();
 
 
            // 获取选定对象
            var selection = document.getSelection();
            // 如果保存的有上次的光标对象
            if (lastEditPosition) {
                // 清除所有选区
                selection.removeAllRanges();
                // 添加最后光标还原之前的状态
                selection.addRange(lastEditPosition);
            }
            // 如果选定对象范围是编辑框范围
            if (selection.anchorNode.nodeName != '#text') {
                // 创建表情文本节点进行插入
                var emojiText = document.createTextNode(inputDom.value);
                // 如果文本框的子元素大于0，则表示有其他元素，则按照位置插入表情节点
                if (editor.childNodes.length > 0) {
                    for (var i = 0; i < editor.childNodes.length; i++) {
                        if (i == selection.anchorOffset) {
                            editor.insertBefore(emojiText, editor.childNodes[i]);
                        }
                    }
                } else {
                    // 否则直接插入一个表情元素
                    editor.appendChild(emojiText);
                }
                // 创建新的光标对象
                var range = document.createRange();
                // 将光标对象的范围界定为新建的表情节点
                range.selectNodeContents(emojiText);
                // 定位光标位置在表情节点的最大长度位置
                range.setStart(emojiText, emojiText.length);
 
                // 将选区折叠为一个光标
                range.collapse(true);
                // 清除所有光标对象
                selection.removeAllRanges();
                // 添加新的光标对象
                selection.addRange(range);
            // 如果选定对象范围是文本节点
            } else {
                // 获取光标对象
                var range = selection.getRangeAt(0);
                // 获取光标对象的范围界定对象，一般就是textNode对象
                var textNode = range.startContainer;
                // 获取光标位置
                var rangeStartOffset = range.startOffset;
                // 在光标位置处插入新的表情内容
                textNode.insertData(rangeStartOffset, inputDom.value);
                // 添加了新内容，将光标移动到新的位置
                range.setStart(textNode, rangeStartOffset + inputDom.value.length);
 
                // 将选区折叠为一个光标
                range.collapse(true);
                // 清除所有光标对象
                selection.removeAllRanges();
                // 添加新的光标对象
                selection.addRange(range);
            }
            // 记录最后光标对象
            lastEditPosition = selection.getRangeAt(0)
        }
    </script>
</body>
 
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容