jquery在contenteditable div中设置光标位置 [英] jquery Setting cursor position in contenteditable div

问题描述

旧版本的问题在下面，经过更多的研究，我决定改写这个问题。和以前一样的问题是，我需要关注一个可以满足需求的div，而不是突出显示文字，直接把焦点集中在Chrome中的文字上。

我意识到人们解决了这个问题在textareas通过重新设置textarea的插入位置。我怎样才能做到这一点contenteditable元素？所有我试过的插件只能用于textareas。

问题的旧表述：

我有一个contenteditable元素那
我想要关注，但是只要
把光标放在
元素的前面，而不是选择
everything。

elem.trigger（'focus'）; 用jquery
选择chrome中整个
元素的所有文本。 Firefox正确行为
，设置插入符号在
前面。我怎么能得到
的Chrome来表现我想要的方式，或者是
的焦点可能不是我正在寻找
。

感谢所有人。

解决方案

strong>： http://so.devilmaycode.it/ jquery-setting-cursor-position-in-contenteditable-div /

  < div id =editablecontentEditable =true> 
< h2> Lorem< / h2> < p> ipsum dolor< i> sit< / i> 
 amet，consectetur< strong> adipiscing< / strong> 。ELIT< / p为H. Aenean。 
< / div> 
  

---

 < ; script type =text / javascript> $（b $ b $（this））。
 $（function（）{
 $（'[contentEditable =true]'）。 hasClass（'editing'））{
 var html = $（this）.html（）; $ b $ if（html.length）{
 var range = rangy.createRange（）; 
 $（this）.toggleClass（'editing'）。html（'< span class =content-editable-wrapper>'+ html +'< / span>'）; 
 var $最后= $（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/

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.

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.

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.

Thanks all.

解决方案

demo: http://so.devilmaycode.it/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/

这篇关于jquery在contenteditable div中设置光标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！