当插入符位于输入末尾的输入内时，在 contenteditable 中输入后立即移动插入符

Question

我遇到了这个问题。我在 contenteditable div 中插入输入元素。插入符号位于最后一个位置的输入中。我想要一些帮助如何通过执行某些功能在该输入之后立即移动光标。您会在我的代码中看到，我必须单击 (justInserted.click()) 才能调整大小。如果我删除 justInserted.focus() 那么插入符号总是在 contenteditable 的开头。我希望有一个函数可以发现插入符位于 contenteditable 的特定输入中，当我调用它时，它会将插入符放在该特定输入之后。感谢您的帮助:)

我在插入符处插入的内容如下所示：

this.insertNodeAtCursor = function(node) {

            var sel, range, html;

            function containerIsEditable(selection) {
                return $(selection.anchorNode).parent().hasClass("editable");
            }

            if (window.getSelection) {
                sel = window.getSelection();
                // only if it is a caret otherwise it inserts
                // anywhere!
                if (containerIsEditable(sel) && sel.getRangeAt
                        && sel.rangeCount) {
                    var previousPosition = sel.getRangeAt(0).startOffset;
                    sel.getRangeAt(0).insertNode(node);
                }
            } 
            else if (document.selection
                    && document.selection.createRange) {
                range = document.selection.createRange();
                html = (node.nodeType == 3) ? node.data
                        : node.outerHTML;
                range.pasteHTML(html);  

            }

        };

添加输入的函数是这样的：

this.addInput = function(suggestEntry, query) {

            var id = suggestEntry.id;
            var nodeClass = suggestEntry.nodeClass;
            var uuid = suggestEntry.uuid;
            var clause = null;
            if (nodeClass === "Entity"){
                clause = new Entity();
                clause.uuid = uuid;
                clause.id = id;
                clause.text = suggestEntry.text;
            }

            var input = clause.toEditorElementHtml();
            this.insertNodeAtCursor(input);
            var rand = Math.floor((Math.random() * 1000000) + 1);
            input.setAttribute('id', "rand-" + rand);

            $rootScope.$broadcast("remove:query",query);
            var autoSizingInputs = $('input[autosize="autosize"]');
            var justInserted = $('#rand-' + rand);
            $compile(autoSizingInputs)($scope);
            justInserted.focus();
            justInserted.click(); // a bit hacky :/
            $(justInserted).val($(justInserted).val() + "");

        };

Answer 1

这是一个片段，其中包含一个功能，可以在焦点输入之后立即移动插入符号。我已经在 Chrome 版本 47.0.2526.111 m、Firefox 43.0.4 和 IE 11 中对其进行了测试。

function setCaretAfterFocusedInput(container) {    
  var input = container.querySelector('input:focus');
  if (input) {
    container.focus(); // required for firefox
    setCaretAfter(input);
  }
}

function setCaretAfter(element) {
  if (window.getSelection) {            
    var range = document.createRange();
    range.setStartAfter(element);
    
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

// for demonstration purposes
document.addEventListener('keyup', function(e) {
  if (e.which === 16) { // on SHIFT
    var container = document.querySelector('div[contenteditable]');
    setCaretAfterFocusedInput(container);
  }
});

<p>When an input is focused, press shift to move the caret right after the input.</p>

<div contenteditable>
  <input type="text" value="input1"><input type="text" value="no whitespace before this">
  <br><br>some text<input type="text" value="input3">more text
  
  <br><br>
  <input type="text"><p>text in a paragraph, no whitespace before this</p>
  
  <input type="text">
  <p>text in a paragraph</p>
</div>

当插入符位于输入末尾的输入内时，在 contenteditable 中输入后立即移动插入符

Move caret right after input in contenteditable when caret is inside the input at the end of it

javascript

caret

contenteditable