Question

我遇到了这个问题。我在一个contenteditable div中插入输入元素。插入符号位于最后位置的输入中。我想通过执行一些功能来帮助如何在输入后立即移动光标。您将在我的代码中看到我必须单击（justInserted.click()）以进行一些调整大小。如果我删除justInserted.focus()，那么插入符始终位于满足的开头。我想有一个函数，发现插入符号在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中对其进行了测试。

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

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

1 个答案: