Це рішення працює у всіх основних браузерах:
saveSelection()додається до onmouseupі onkeyupподій діва та зберігає вибір до змінної savedRange.
restoreSelection()додається до onfocusподії div і перебирає збережений у ньому вибір savedRange.
Це прекрасно працює, якщо ви не хочете, щоб вибір було відновлено, коли користувач натискає на div div (що трохи неінвазивно, оскільки зазвичай ви очікуєте, що курсор піде туди, куди ви натискаєте, але код включений для повноти)
Щоб досягти цього, onclickі onmousedownподії скасовуються функцією, cancelEvent()яка є функцією крос-браузера для скасування події. cancelEvent()Функція також запускає restoreSelection()функцію , так як подія клацання скасував ДІВ не отримує фокус , і тому нічого не вибрано взагалі , якщо ця функція не працюватиме.
Змінна isInFocusзберігає, чи знаходиться вона у фокусі, чи змінюється на "хибна" onblurта "справжня" onfocus. Це дозволяє скасувати події клацання лише в тому випадку, якщо 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 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>
contentEditableпрацював в НЕ IE браузерах о_О