jQuery jquery在contenteditable div中设置光标位置

jquery Setting cursor position in contenteditable div

提问by Mark

The old version of the question is below, after researching more, I decided to rephrase the question. The problem as before is, I need to focus a contenteditable div without highlighting the text, doing straight up focus highlights the text in Chrome.

问题的旧版本如下，在研究了更多之后，我决定重新表述这个问题。和以前一样的问题是，我需要在不突出显示文本的情况下聚焦一个 contenteditable div，直接聚焦在 Chrome 中突出显示文本。

I realize that people solved this problems in textareas by resetting the caret position in the textarea. How can I do that with a contenteditable element? All the plugins I've tried only works with textareas. Thanks.

我意识到人们通过重置 textarea 中的插入符号位置解决了 textarea 中的这个问题。如何使用 contenteditable 元素做到这一点？我尝试过的所有插件都只适用于 textareas。谢谢。

Old Phrasing of the question:

问题的旧措辞：

I have a contenteditable element that I want to focus, but only insofar as to place the cursor at the front of the element, rather selecting everything.

elem.trigger('focus');with jquery selects all the text in the entire element in chrome. Firefox behaves correctly, setting the caret at the front of the text. How can I get Chrome to behave the way I want, or is focus perhaps not what I'm looking for.

我有一个想要关注的 contenteditable 元素，但仅限于将光标放在元素的前面，而不是选择所有内容。

elem.trigger('focus');使用 jquery 选择 chrome 中整个元素中的所有文本。Firefox 行为正确，在文本前面设置插入符号。我怎样才能让 Chrome 以我想要的方式行事，或者焦点可能不是我正在寻找的。

Thanks all.

谢谢大家。

采纳答案by Luca Filosofi

demo: http://so.lucafilosofi.com/jquery-setting-cursor-position-in-contenteditable-div/

演示：http: //so.lucafilosofi.com/jquery-setting-cursor-position-in-contenteditable-div/

      <div id="editable" contentEditable="true">
            <h2>Lorem</h2> <p>ipsum dolor <i>sit</i> 
               amet, consectetur <strong>adipiscing</strong> elit.</p> Aenean.
        </div>

---

---

    <script type="text/javascript">
        $(function () {
            $('[contentEditable="true"]').on('click', function (e) {
                if (!$(this).hasClass('editing')) {
                    var html = $(this).html();
                    if (html.length) {
                        var range = rangy.createRange();
                        $(this).toggleClass('editing').html('<span class="content-editable-wrapper">' + html + '</span>');
                        var $last = $(this).find('.content-editable-wrapper');
                        range.setStartAfter($last[0]);
                        range.collapse(false);
                        rangy.getSelection().setSingleRange(range);
                    }
                }
            }).on('blur', function () {
                $(this).toggleClass('editing').find('.content-editable-wrapper').children().last().unwrap();
            });
        });
    </script>

• NOTE:make use of rangy.js https://code.google.com/p/rangy/

• 注意：使用 rangy.js https://code.google.com/p/rangy/

回答by Tim Down

Maybe I'm misreading the question, but wouldn't the following do (assuming an editable <div>with id "editable")? The timer is there because in Chrome, the native browser behaviour that selects the whole element seems to trigger after the focusevent, thereby overriding the effect of the selection code unless postponed until after the focus event:

也许我误读了这个问题，但以下内容不会吗（假设可编辑<div>的 id 为“editable”）？计时器在那里是因为在 Chrome 中，选择整个元素的本机浏览器行为似乎在focus事件之后触发，从而覆盖选择代码的效果，除非推迟到焦点事件之后：

var div = document.getElementById("editable");

div.onfocus = function() {
    window.setTimeout(function() {
        var sel, range;
        if (window.getSelection && document.createRange) {
            range = document.createRange();
            range.selectNodeContents(div);
            range.collapse(true);
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(div);
            range.collapse(true);
            range.select();
        }
    }, 1);
};

div.focus();

回答by Chirag

Yes it happens because you have used

是的，这是因为您使用过

elem.trigger('focus'); 

try to use class or to identify the element on which you want to fire a trigger event.

尝试使用 class 或标识要在其上触发触发器事件的元素。

回答by DfKimera

I managed to solve that problem after a bit of poking around the DOM.

在对 DOM 进行了一番探索之后，我设法解决了这个问题。

elm.focus();
window.getSelection().setPosition(0);

It probably only works on WebKit browsers, but since it is the only source of the problem, I added a conditional (using jQuery)

它可能只适用于 WebKit 浏览器，但由于它是问题的唯一来源，我添加了一个条件（使用 jQuery）

if(!$.browser.webkit) {
    elm.focus();
} else {
    elm.focus();
    window.getSelection().setPosition(0);
}

Hope this solves your problem.

希望这能解决您的问题。

回答by K. Kuksin

Set pointer position in pre or div tag:

在 pre 或 div 标签中设置指针位置：

function setCursor(pos) {
    var el = document.getElementById("asd");
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(el.childNodes[0], pos);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    el.focus();
}

$('button').click(function () {
    setCursor(5);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="asd" contenteditable="true" >
asd
two
</div>
<button>Set caret position</button>

Source: https://social.msdn.microsoft.com/Forums/en-US/f91341cb-48b3-424b-9504-f2f569f4860f/getset-caretcursor-position-in-a-contenteditable-div?forum=winappswithhtml5

来源：https: //social.msdn.microsoft.com/Forums/en-US/f91341cb-48b3-424b-9504-f2f569f4860f/getset-caretcursor-position-in-a-contenteditable-div?forum=winappswithhtml5