此解決方案適用于所有主要瀏覽器：
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 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 onclickvar 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>
