将插入符号移到内容中输入的右边可编辑，当插入符号在输入的末尾时

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

本文关键字：输入 符号 插入 编辑 右边      更新时间：2023-09-26

我遇到了这个问题。我正在一个内容可编辑的div中插入输入元素。插入符号在最后一个位置的输入中。我想通过执行一些函数来帮助如何将光标移动到输入之后。您将在我的代码中看到，我必须单击（justInserted.click()）才能进行一些调整大小的操作。如果删除justInserted.focus()，则插入符号始终位于内容可编辑的开头。我想要一个函数，它可以发现插入符号在内容可编辑的特定输入中，当我调用它时，它会将插入符号放在该特定输入之后。感谢您的帮助：）

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

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() + "");
        };

这里有一个片段，它带有一个将插入符号移到焦点输入之后的函数。我已经在Chrome 47.0.2526.111m、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>

相关文章：