jquery在contenteditable div中设置光标位置

这个问题的旧版本是在下面，经过更多的研究，我决定重新提出这个问题。 问题和以前一样，我需要关注一个自信的div，而不是突出显示文本，直接在焦点上突出显示Chrome中的文本。

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

问题的旧表述：

我有一个我想要关注的可以理解的元素，但只要把光标放在元素的前面，而不是select所有的东西。

elem.trigger('focus'); 用jquery在chrome中select整个元素中的所有文本。 Firefox的行为是正确的，在文本的前面设置插入符号。 如何让Chrome按照我想要的方式行事，或者只关注我可能不在寻找的内容。

谢谢大家。

Answer 1

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

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

Answer 2

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

 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 3

是的，这是因为你使用过

 elem.trigger('focus'); 

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

Answer 4

在设法解决这个问题之后，我设法解决了这个问题。

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

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

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

希望这可以解决你的问题。