วิธีนี้ใช้ได้กับเบราว์เซอร์หลัก ๆ ทั้งหมด:
saveSelection()ถูกแนบกับonmouseupและonkeyupเหตุการณ์ของ div และบันทึกการเลือกไปยังตัวแปรsavedRangeและบันทึกการเลือกให้กับตัวแปร
restoreSelection()ถูกแนบกับonfocusเหตุการณ์ของ div และเลือกการเลือกที่บันทึกไว้ใหม่savedRangeใหม่
วิธีนี้จะทำงานได้อย่างสมบูรณ์เว้นแต่คุณต้องการให้มีการเรียกคืนสิ่งที่เลือกเมื่อผู้ใช้คลิกที่ div เช่นกัน (ซึ่งค่อนข้างไม่เป็นไปตามปกติคุณคาดหวังว่าเคอร์เซอร์จะไปยังตำแหน่งที่คุณคลิก
เพื่อให้บรรลุถึงสิ่งนี้onclickและonmousedownเหตุการณ์จะถูกยกเลิกโดยฟังก์ชั่นcancelEvent()ซึ่งเป็นฟังก์ชั่นข้ามเบราว์เซอร์เพื่อยกเลิกเหตุการณ์ cancelEvent()ฟังก์ชั่นยังทำงานrestoreSelection()ฟังก์ชั่นเพราะเป็นเหตุการณ์คลิกจะถูกยกเลิก div ที่ไม่ได้รับการมุ่งเน้นและดังนั้นจึงไม่มีอะไรที่จะถูกเลือกในทุกฟังก์ชั่นนี้ยกเว้นในกรณีที่มีการเรียก
ตัวแปรจัดisInFocusเก็บว่าอยู่ในโฟกัสหรือไม่และเปลี่ยนเป็น "false" onblurและ "true"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