Question

我有一个具有contenteditable属性的div。用户需要能够键入并插入光标所在的几个选择菜单。我设法获取光标位置并插入第一个选择菜单，但它只适用于第一个文本节点。

这就是我如何获得光标位置：

function getCaretCharacterOffsetWithin(element) {
    var caretOffset = 0;
    var doc = element.ownerDocument || element.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel;
    if (typeof win.getSelection != "undefined") {
            sel = win.getSelection();
            if (sel.rangeCount > 0) {
                    var range = win.getSelection().getRangeAt(0);
                    var preCaretRange = range.cloneRange();
                    preCaretRange.selectNodeContents(element);
                    preCaretRange.setEnd(range.endContainer, range.endOffset);
                    caretOffset = preCaretRange.toString().length;
                }
            } else if ( (sel = doc.selection) && sel.type != "Control") {
              var textRange = sel.createRange();
              var preCaretTextRange = doc.body.createTextRange();
              preCaretTextRange.moveToElementText(element);
              preCaretTextRange.setEndPoint("EndToEnd", textRange);
              caretOffset = preCaretTextRange.text.length;
          }
          return caretOffset;
    }

然后我每次用户输入或点击时都会更新它。

function updatePos() {
    var el = document.getElementById("msg");   
    pos = getCaretCharacterOffsetWithin(el);
}
document.body.onkeyup = updatePos;
document.body.onmouseup = updatePos;

然后在这里我如何处理添加选择的按钮。我不确定如何在文本节点之后插入元素，因此我插入一个br标记并在以后删除它。必须有一个更清洁的方式，对吧？

$('#btn').click(function(){
        var selectList = document.createElement('select');
        var msg = $('#msg');
        $(msg).html(function(){
                var first = $(msg).html().substring(0, pos);
                var last =  $(msg).html().substring(pos);
                return first + '<br>' + last;
        });

        $(msg).contents().filter('br').after(selectList);

        $(msg).contents().filter('br').remove();

        $(msg).focus();
})

我想问题是我使用子字符串来分割文本并能够在那里插入选择，并且只要有另一个选择标记，子字符串就不能超过第一个文本节点。所以也许我应该用不同的方法重做整个事情，但我完全陷入困境。

这里是jsfiddle：https://jsfiddle.net/8a63sosr/

谢谢！

Answer 1

问题是，对于HTML元素，它需要jQuery，text()，而不是html()。

我想有一些更好的解决方案，有一些范围参数，但这里有一些东西：

    //fix caret pos
    var temlOffset = pos;
    $('#msg').html().split(/(<[^>]+>)/g).forEach(function(el){
        if(temlOffset > 0){
            if(el.length && el[0] === '<'){
               pos += el.length;
            } else {
               temlOffset -= el.length;
            }
        }
    });

https://jsfiddle.net/Lemz17L8/

因此，它的作用是将html标记长度添加到pos值。

此致，亚历山大

在光标位置的可编辑div内插入多个元素

1 个答案: