JS在可编辑的div中的光标位置插入内容或表情

2016/12/29 15:38
阅读数 872
<input type="button" value="插入字符" onclick="document.getElementById('test').focus(); insertHtmlAtCaret('<b>INSERTED</b>');" />
<div contenteditable="true" style="height:50px; border:2px solid red;" id="test"> </div>
<script type="text/javascript">
    function insertHtmlAtCaret(html) {
        var sel, range;
        if (window.getSelection) {
            // IE9 and non-IE
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                // Range.createContextualFragment() would be useful here but is
                // non-standard and not supported in all browsers (IE9, for one)
                var el = document.createElement("div");
                el.innerHTML = html;
                var frag = document.createDocumentFragment(), node, lastNode;
                while ((node = el.firstChild)) {
                    lastNode = frag.appendChild(node);
                }
                range.insertNode(frag);
                // Preserve the selection
                if (lastNode) {
                    range = range.cloneRange();
                    range.setStartAfter(lastNode);
                    range.collapse(true);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
        } else if (document.selection && document.selection.type != "Control") {
            // IE < 9
            document.selection.createRange().pasteHTML(html);
        }
    }
</script>

展开阅读全文
打赏
1
2 收藏
分享
加载中
我在这搞了半天 发现上面的触发按钮 如果是文本类型标签 就不行 一开始我用的是图标<i> 点击后 老是定位到div开始位置 , 换成button就行了 纠结
2017/04/10 16:58
回复
举报
更多评论
打赏
1 评论
2 收藏
1
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部