jquery在contenteditable div中设置光标位置

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

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

问题的旧表述:

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

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

谢谢大家。

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

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

是的,这是因为你使用过

 elem.trigger('focus'); 

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

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

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

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

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

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