jquery在contenteditable div中设置光标位置

前端之家收集整理的这篇文章主要介绍了jquery在contenteditable div中设置光标位置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
老版本的问题是下面,经过研究更多,我决定改写这个问题。像以前一样的问题是,我需要关注一个contenteditable div不高亮文本,做直向对焦突出显示在Chrome中的文本。

我意识到,人们通过重置在textarea中的插入符位置解决这个问题在textareas。我如何用可写性元素做到这一点?我试过的所有插件只能工作在textareas。谢谢。

老话的问题:

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.

谢谢大家。

解决方法

demo: 07000

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

猜你在找的jQuery相关文章