यह समाधान सभी प्रमुख ब्राउज़रों में काम करता है:
saveSelection()div की घटनाओं से जुड़ा हुआ है onmouseupऔर onkeyupचर के लिए चयन बचाता है savedRange।
restoreSelection()onfocusdiv की घटना से जुड़ा हुआ है और में सहेजे गए चयन को फिर से दर्शाता है savedRange।
यह पूरी तरह से तब तक काम करता है जब तक कि आप चयन को बहाल नहीं करना चाहते हैं जब उपयोगकर्ता div aswell पर क्लिक करता है (जो कि थोड़ा सा अनपेक्षित है जैसा कि आमतौर पर आप कर्सर को जाने की उम्मीद करते हैं जहां आप क्लिक करते हैं लेकिन पूर्णता के लिए शामिल कोड)
इसे प्राप्त करने के लिए onclickऔर onmousedownईवेंट को रद्द करने के लिए फ़ंक्शन cancelEvent()जो इवेंट को रद्द करने के लिए एक क्रॉस ब्राउज़र फ़ंक्शन है। cancelEvent()समारोह भी चलाता है restoreSelection()क्योंकि के रूप में क्लिक करें घटना को रद्द कर दिया है div फोकस प्राप्त नहीं होता है और जब तक यह काम करता है चलाया जाता है इसलिए कुछ भी नहीं सब पर चयन किया जाता है समारोह।
चर 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>
contentEditableIE-IE ब्राउज़रों में काम किया था o_o