在内容可编辑<div>上设置光标位置

Question

我需要一个明确的跨浏览器解决方案，将游标/插入符号的位置设置为最后一个已知的位置，当内容编辑=‘on’<div>重新获得焦点时。内容可编辑div的默认功能似乎是每次单击div时将插入符号/光标移动到div中文本的开头，这是不可取的。

我相信，当它们离开div的焦点时，我必须将当前光标的位置存储在变量中，然后当它们再次将焦点放在内部时，重新设置这个值，但是我还不能将它们放在一起，或者找到一个工作代码示例。

如果有人有任何想法，工作代码片段或样本，我会很高兴看到他们。

我还没有真正的代码，但下面是我所拥有的：

<script type="text/javascript">// jQuery$(document).ready(function() {
   $('#area').focus(function() { .. }  // focus I would imagine I need.}</script><div id="area" contentEditable="true"></div>

PS。我尝试过这个资源，但它似乎不适用于<div>。可能只适用于TextArea(如何将光标移动到可内容实体的末尾)

在内容可编辑<div>上设置光标位置

Answer 1

这与基于标准的浏览器兼容，但在IE中可能会失败。我把它作为起点。不支持DOM范围。var&nbsp;editable&nbsp;=&nbsp;document.getElementById('editable'), &nbsp;&nbsp;&nbsp;&nbsp;selection,&nbsp;range;//&nbsp;Populates&nbsp;selection&nbsp;and&nbsp;range&nbsp;variablesvar&nbsp;captureSelection&nbsp;=&nbsp;function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Don't&nbsp;capture&nbsp;selection&nbsp;outside&nbsp;editable&nbsp;region &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;isOrContainsAnchor&nbsp;=&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isOrContainsFocus&nbsp;=&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sel&nbsp;=&nbsp;window.getSelection(), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parentAnchor&nbsp;=&nbsp;sel.anchorNode, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parentFocus&nbsp;=&nbsp;sel.focusNode; &nbsp;&nbsp;&nbsp;&nbsp;while(parentAnchor&nbsp;&&&nbsp;parentAnchor&nbsp;!=&nbsp;document.documentElement)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(parentAnchor&nbsp;==&nbsp;editable)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isOrContainsAnchor&nbsp;=&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parentAnchor&nbsp;=&nbsp;parentAnchor.parentNode; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;while(parentFocus&nbsp;&&&nbsp;parentFocus&nbsp;!=&nbsp;document.documentElement)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(parentFocus&nbsp;==&nbsp;editable)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isOrContainsFocus&nbsp;=&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parentFocus&nbsp;=&nbsp;parentFocus.parentNode; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;if(!isOrContainsAnchor&nbsp;||&nbsp;!isOrContainsFocus)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;selection&nbsp;=&nbsp;window.getSelection(); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Get&nbsp;range&nbsp;(standards) &nbsp;&nbsp;&nbsp;&nbsp;if(selection.getRangeAt&nbsp;!==&nbsp;undefined)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;range&nbsp;=&nbsp;selection.getRangeAt(0); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Get&nbsp;range&nbsp;(Safari&nbsp;2) &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.createRange&nbsp;&& &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selection.anchorNode&nbsp;&& &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selection.anchorOffset&nbsp;&& &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selection.focusNode&nbsp;&& &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selection.focusOffset&nbsp;&nbsp;&nbsp;&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;range&nbsp;=&nbsp;document.createRange(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;range.setStart(selection.anchorNode,&nbsp;selection.anchorOffset); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;range.setEnd(selection.focusNode,&nbsp;selection.focusOffset); &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Failure&nbsp;here,&nbsp;not&nbsp;handled&nbsp;by&nbsp;the&nbsp;rest&nbsp;of&nbsp;the&nbsp;script. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Probably&nbsp;IE&nbsp;or&nbsp;some&nbsp;older&nbsp;browser &nbsp;&nbsp;&nbsp;&nbsp;}};//&nbsp;Recalculate&nbsp;selection&nbsp;while&nbsp;typingeditable.onkeyup&nbsp;=&nbsp;captureSelection; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Recalculate&nbsp;selection&nbsp;after&nbsp;clicking/drag-selectingeditable.onmousedown&nbsp;=&nbsp;function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;editable.className&nbsp;=&nbsp;editable.className&nbsp;+&nbsp;'&nbsp;selecting';};document.onmouseup&nbsp;=&nbsp;function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;if(editable.className.match(/\sselecting(\s|$)/))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editable.className&nbsp;=&nbsp;editable.className.replace(/&nbsp;selecting(\s|$)/,&nbsp;''); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;captureSelection(); &nbsp;&nbsp;&nbsp;&nbsp;}};editable.onblur&nbsp;=&nbsp;function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;cursorStart&nbsp;=&nbsp;document.createElement('span'), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collapsed&nbsp;=&nbsp;!!range.collapsed; &nbsp;&nbsp;&nbsp;&nbsp;cursorStart.id&nbsp;=&nbsp;'cursorStart'; &nbsp;&nbsp;&nbsp;&nbsp;cursorStart.appendChild(document.createTextNode('—')); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Insert&nbsp;beginning&nbsp;cursor&nbsp;marker &nbsp;&nbsp;&nbsp;&nbsp;range.insertNode(cursorStart); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Insert&nbsp;end&nbsp;cursor&nbsp;marker&nbsp;if&nbsp;any&nbsp;text&nbsp;is&nbsp;selected &nbsp;&nbsp;&nbsp;&nbsp;if(!collapsed)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;cursorEnd&nbsp;=&nbsp;document.createElement('span'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cursorEnd.id&nbsp;=&nbsp;'cursorEnd'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;range.collapse(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;range.insertNode(cursorEnd); &nbsp;&nbsp;&nbsp;&nbsp;}};//&nbsp;Add&nbsp;callbacks&nbsp;to&nbsp;afterFocus&nbsp;to&nbsp;be&nbsp;called&nbsp;after&nbsp;cursor&nbsp;is&nbsp;replaced &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;if&nbsp;you&nbsp;like,&nbsp;this&nbsp;would&nbsp;be&nbsp;useful&nbsp;for&nbsp;styling&nbsp;buttons&nbsp;and&nbsp;so&nbsp;onvar&nbsp;afterFocus&nbsp;=&nbsp;[];editable.onfocus&nbsp;=&nbsp;function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Slight&nbsp;delay&nbsp;will&nbsp;avoid&nbsp;the&nbsp;initial&nbsp;selection &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;(at&nbsp;start&nbsp;or&nbsp;of&nbsp;contents&nbsp;depending&nbsp;on&nbsp;browser)&nbsp;being&nbsp;mistaken &nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;cursorStart&nbsp;=&nbsp;document.getElementById('cursorStart'), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cursorEnd&nbsp;=&nbsp;document.getElementById('cursorEnd'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Don't&nbsp;do&nbsp;anything&nbsp;if&nbsp;user&nbsp;is&nbsp;creating&nbsp;a&nbsp;new&nbsp;selection &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(editable.className.match(/\sselecting(\s|$)/))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(cursorStart)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cursorStart.parentNode.removeChild(cursorStart); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(cursorEnd)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cursorEnd.parentNode.removeChild(cursorEnd); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if(cursorStart)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;captureSelection(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;range&nbsp;=&nbsp;document.createRange(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(cursorEnd)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;range.setStartAfter(cursorStart); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;range.setEndBefore(cursorEnd); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Delete&nbsp;cursor&nbsp;markers &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cursorStart.parentNode.removeChild(cursorStart); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cursorEnd.parentNode.removeChild(cursorEnd); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Select&nbsp;range &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selection.removeAllRanges(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selection.addRange(range); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;range.selectNode(cursorStart); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Select&nbsp;range &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selection.removeAllRanges(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selection.addRange(range); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Delete&nbsp;cursor&nbsp;marker &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.execCommand('delete',&nbsp;false,&nbsp;null); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Call&nbsp;callbacks&nbsp;here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;afterFocus.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;afterFocus[i](); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;afterFocus&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Register&nbsp;selection&nbsp;again &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;captureSelection(); &nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;10);};

Answer 2

此解决方案适用于所有主要浏览器：saveSelection()连接到onmouseup和onkeyup事件，并将所选内容保存到变量中。savedRange.restoreSelection()连接到onfocus事件，并重新选择保存在savedRange.这是非常有效的，除非您希望在用户单击div时恢复所选内容(这有点非直观，通常您希望光标到您单击的位置，但代码是完整的)。为了实现这一点，onclick和onmousedown事件被函数取消。cancelEvent()它是一个跨浏览器函数，用于取消事件。这个cancelEvent()函数还运行restoreSelection()函数，因为在取消单击事件时，div不会接收焦点，因此，除非运行此函数，否则不会选择任何内容。变量isInFocus存储它是否在焦点中并被更改为“false”。onblur和“真实”onfocus..这允许只在div不在焦点时才取消单击事件(否则根本无法更改所选内容)。如果希望在div通过单击来聚焦时更改所选内容，而不恢复所选内容onclick(并且只有在以编程方式将焦点分配给元素时，才使用document.getElementById("area").focus();或者类似的，然后简单地删除onclick和onmousedown事件。这个onblur事件和onDivBlur()和cancelEvent()在这种情况下也可以安全地删除函数。如果您想要快速测试该代码，那么如果将它直接放到html页面的正文中，则该代码应该可以工作：<div&nbsp;id="area"&nbsp;style="width:300px;height:300px;"&nbsp;onblur="onDivBlur();"&nbsp;onmousedown="return&nbsp;cancelEvent(event); "&nbsp;onclick="return&nbsp;cancelEvent(event);"&nbsp;contentEditable="true"&nbsp;onmouseup="saveSelection();"&nbsp;onkeyup="saveSelection() ;"&nbsp;onfocus="restoreSelection();"></div><script&nbsp;type="text/javascript">var&nbsp;savedRange,isInFocus;function&nbsp;saveSelection(){ &nbsp;&nbsp;&nbsp;&nbsp;if(window.getSelection)//non&nbsp;IE&nbsp;Browsers &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;savedRange&nbsp;=&nbsp;window.getSelection().getRangeAt(0); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if(document.selection)//IE &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;savedRange&nbsp;=&nbsp;document.selection.createRange();&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;}function&nbsp;restoreSelection(){ &nbsp;&nbsp;&nbsp;&nbsp;isInFocus&nbsp;=&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("area").focus(); &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(savedRange&nbsp;!=&nbsp;null)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(window.getSelection)//non&nbsp;IE&nbsp;and&nbsp;there&nbsp;is&nbsp;already&nbsp;a&nbsp;selection &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;s&nbsp;=&nbsp;window.getSelection(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(s.rangeCount&nbsp;>&nbsp;0)&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s.removeAllRanges(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s.addRange(savedRange); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if&nbsp;(document.createRange)//non&nbsp;IE&nbsp;and&nbsp;no&nbsp;selection &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.getSelection().addRange(savedRange); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if&nbsp;(document.selection)//IE &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;savedRange.select(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}}//this&nbsp;part&nbsp;onwards&nbsp;is&nbsp;only&nbsp;needed&nbsp;if&nbsp;you&nbsp;want&nbsp;to&nbsp;restore&nbsp;selection&nbsp;onclickvar&nbsp;isInFocus&nbsp;=&nbsp;false;function&nbsp;onDivBlur(){ &nbsp;&nbsp;&nbsp;&nbsp;isInFocus&nbsp;=&nbsp;false;}function&nbsp;cancelEvent(e){ &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(isInFocus&nbsp;==&nbsp;false&nbsp;&&&nbsp;savedRange&nbsp;!=&nbsp;null)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(e&nbsp;&&&nbsp;e.preventDefault)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//alert("FF"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.stopPropagation();&nbsp;//&nbsp;DOM&nbsp;style&nbsp;(return&nbsp;false&nbsp;doesn't&nbsp;always&nbsp;work&nbsp;in&nbsp;FF) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.event.cancelBubble&nbsp;=&nbsp;true;//IE&nbsp;stopPropagation &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;restoreSelection(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false;&nbsp;//&nbsp;false&nbsp;=&nbsp;IE&nbsp;style &nbsp;&nbsp;&nbsp;&nbsp;}}</script>

Answer 3

我编写了一个跨浏览器范围和选择库，名为兰迪它包含了我在下面发布的代码的改进版本。您可以使用选择保存和恢复模块对于这个特殊的问题，虽然我很想用这样的方法@Nico Burns的回答如果您没有在项目中做其他的选择，并且不需要大量的库。