jquery在contenteditable div中设置光标位置

Question

问题的旧版本如下,在研究了更多之后,我决定重新解释这个问题.像以前一样的问题是,我需要在没有突出显示文本的情况下关注一个可信的div,直接进行焦点突出显示Chrome中的文本.

我意识到人们通过重置textarea中的插入位置来解决textareas中的这个问题.我怎么能用一个满足的元素来做到这一点？我试过的所有插件只适用于textareas.谢谢.

问题的老措辞:

我有一个我想要关注的可满足的元素,但只是将光标放在元素的前面,而是选择所有内容.

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

谢谢大家.

Answer 1

也许我误解了这个问题,但不会做下面的事情(假设一个可编辑<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();

Answer 2

演示: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>

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