36

问题的旧版本如下，经过更多研究，我决定改写这个问题。和以前一样的问题是，我需要在不突出显示文本的情况下聚焦一个 contenteditable div，直接向上聚焦会突出显示 Chrome 中的文本。

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

问题的旧措辞：

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

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

谢谢大家。

4

5 回答 5

30

也许我误读了这个问题，但以下不是（假设一个可编辑<div>的 id 为“可编辑”）？计时器在那里是因为在 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();
于 2010-06-01T09:27:26.030 回答
20

演示：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>
于 2010-05-27T10:08:35.583 回答
3

是的，因为您使用过

elem.trigger('focus');

尝试使用类或识别要触发触发事件的元素。

于 2010-05-20T05:09:47.773 回答
1

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

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

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

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

希望这能解决您的问题。

于 2010-06-09T17:26:22.700 回答
0

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

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

于 2018-01-29T04:13:24.457 回答