在 contentEditable

上设置光标位置

我正在寻找一个明确的跨浏览器解决方案，当 contentEditable='on'

我相信当它们离开 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>

附言。我已经尝试过此资源，但它似乎不适用于

该解决方案适用于所有主要浏览器：

saveSelection()附于onmouseup and onkeyupdiv 的事件并将选择保存到变量savedRange.

restoreSelection()附于onfocusdiv 的事件并重新选择保存在中的选择savedRange.

这非常有效，除非您希望在用户单击 div 时恢复选择（这有点不直观，因为通常您希望光标移动到您单击的位置，但为了完整性而包含了代码）

为了实现这一目标onclick and onmousedown事件被函数取消cancelEvent()这是取消事件的跨浏览器功能。这cancelEvent()函数还运行restoreSelection()函数，因为当单击事件被取消时，div 不会接收焦点，因此除非运行此函数，否则根本不会选择任何内容。

变量isInFocus存储是否处于焦点并更改为“false”onblur和“真实”onfocus。仅当 div 未处于焦点时，这才允许取消单击事件（否则您将根本无法更改选择）。

如果您希望当 div 通过单击获得焦点时更改选择，而不是恢复选择onclick（并且仅当使用编程方式将焦点赋予元素时document.getElementById("area").focus();或类似的，然后只需删除onclick and onmousedown事件。这onblur事件和onDivBlur() and cancelEvent()在这些情况下也可以安全地删除功能。

如果您想快速测试此代码，则直接放入 html 页面的正文中应该可以工作：

<div id="area" style="width:300px;height:300px;" onblur="onDivBlur();" onmousedown="return cancelEvent(event);" onclick="return cancelEvent(event);" contentEditable="true" onmouseup="saveSelection();" onkeyup="saveSelection();" onfocus="restoreSelection();"></div>
<script type="text/javascript">
var savedRange,isInFocus;
function saveSelection()
{
    if(window.getSelection)//non IE Browsers
    {
        savedRange = window.getSelection().getRangeAt(0);
    }
    else if(document.selection)//IE
    { 
        savedRange = document.selection.createRange();  
    } 
}

function restoreSelection()
{
    isInFocus = true;
    document.getElementById("area").focus();
    if (savedRange != null) {
        if (window.getSelection)//non IE and there is already a selection
        {
            var s = window.getSelection();
            if (s.rangeCount > 0) 
                s.removeAllRanges();
            s.addRange(savedRange);
        }
        else if (document.createRange)//non IE and no selection
        {
            window.getSelection().addRange(savedRange);
        }
        else if (document.selection)//IE
        {
            savedRange.select();
        }
    }
}
//this part onwards is only needed if you want to restore selection onclick
var isInFocus = false;
function onDivBlur()
{
    isInFocus = false;
}

function cancelEvent(e)
{
    if (isInFocus == false && savedRange != null) {
        if (e && e.preventDefault) {
            //alert("FF");
            e.stopPropagation(); // DOM style (return false doesn't always work in FF)
            e.preventDefault();
        }
        else {
            window.event.cancelBubble = true;//IE stopPropagation
        }
        restoreSelection();
        return false; // false = IE style
    }
}
</script>