このソリューションは、すべての主要なブラウザーで機能します。
saveSelection()はdivのonmouseupおよびイベントにアタッチされ、選択内容を変数 に保存します。onkeyupsavedRange
restoreSelection()onfocusdivのイベントにアタッチされ、で保存された選択を再選択しsavedRangeます。
これは、ユーザーが div をクリックしたときに選択を復元する必要がない限り、完全に機能します (これは、通常、クリックした場所にカーソルが移動すると予想されるため、少し直感的ではありませんが、完全を期すためにコードが含まれています)。
これを実現するためにonclick、イベントをキャンセルするためのクロス ブラウザー関数であるonmousedown関数によってイベントがキャンセルされます。クリック イベントがキャンセルされると div がフォーカスを受け取らず、この関数が実行されない限り何も選択されないため、関数も関数を実行しcancelEvent()ますcancelEvent()。restoreSelection()
変数isInFocusは、フォーカスされているかどうかを格納し、 "false"onblurおよび "true"に変更されますonfocus。これにより、div がフォーカスされていない場合にのみ、クリック イベントをキャンセルできます (そうでない場合は、選択をまったく変更できません)。
クリックで div がフォーカスされたときに選択を変更し、選択を復元しないonclickようにする場合 (およびプログラムで要素にフォーカスが与えられた場合にのみ、または同様の操作を行ってから、 andイベントdocument.getElementById("area").focus();を削除します。イベントとand関数は、このような状況でも安全に取り外すことができます。onclickonmousedownonbluronDivBlur()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>