Это решение работает во всех основных браузерах:
saveSelection()прикрепляются к onmouseupи onkeyupсобытиям DIV и сохраняет выбор в переменном savedRange.
restoreSelection()присоединяется к onfocusсобытию div и повторно выбирает сохраненный в savedRange.
Это работает отлично, если только вы не хотите, чтобы выбор был восстановлен, когда пользователь щелкает div также (что немного неинтуитивно, поскольку обычно вы ожидаете, что курсор будет идти туда, куда вы щелкаете, но код включен для полноты)
Для достижения этой цели onclickи onmousedownмероприятия отменяются функции , cancelEvent()которая является кросс функция браузера , чтобы отменить событие. cancelEvent()Функция также запускает restoreSelection()функцию , так как событие щелчок отменило ДИВ не получает фокус , и поэтому ничего не выбрано вообще , если эта функция не будет работать.
Переменная isInFocusхранит, находится ли она в фокусе и изменена на «ложь» 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 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 o_o