এই সমাধানটি সমস্ত বড় ব্রাউজারগুলিতে কাজ করে:
saveSelection()সংযুক্ত onmouseupএবং onkeyupএর div ঘটনা এবং পরিবর্তনশীল নির্বাচন সংরক্ষণ savedRange।
restoreSelection()onfocusডিভের ইভেন্টের সাথে সংযুক্ত থাকে এবং সেভ করা নির্বাচনটি পুনরায় প্রদর্শন করে savedRange।
এটি পুরোপুরি কার্যকর হয় যদি না আপনি নির্বাচনটি পুনরুদ্ধার করতে চান তবে যখন ব্যবহারকারী ডিভকে ক্লিক করেন (যা কিছুটা অপ্রয়োজনীয় তবে সাধারণত আপনি যেখানে ক্লিক করেন সেখানে কোডারটি পূর্ণ হওয়ার জন্য কোডটি অন্তর্ভুক্ত রয়েছে)
এটি অর্জনের জন্য onclickএবং onmousedownইভেন্টগুলি ফাংশন দ্বারা বাতিল করা হয় cancelEvent()যা ইভেন্টটি বাতিল করার জন্য একটি ক্রস ব্রাউজার ফাংশন। cancelEvent()ফাংশন এছাড়াও চালায় restoreSelection()কারণ হিসাবে ক্লিক ইভেন্টটি বাতিল করা হয়েছে DIV আছে ফোকাস গ্রহণ করে না এবং যদি না এই ফাংশন চালানো হয় সেইজন্য কিছুই এ সব নির্বাচন করা হয় ফাংশন।
পরিবর্তনশীল isInFocusএটি ফোকাসে রয়েছে এবং "মিথ্যা" onblurএবং "সত্য" এ পরিবর্তিত হয়েছে কিনা তা সংরক্ষণ করে onfocus। এটি ক্লিক ইভেন্টগুলি কেবলমাত্র ডিভ ফোকাসে না থাকলে বাতিল করতে দেয় (অন্যথায় আপনি নির্বাচনটি মোটেই পরিবর্তন করতে পারবেন না)।
আপনি যদি onclickডিভকে ক্লিকের মাধ্যমে কেন্দ্রীভূত করে নির্বাচনটি পরিবর্তন করতে চান এবং নির্বাচনটি পুনরুদ্ধার না করে (এবং শুধুমাত্র যখন উপাদানটিকে প্রোগ্রামিকভাবে ব্যবহার document.getElementById("area").focus();বা অনুরূপভাবে ফোকাস দেওয়া হয় তবে কেবল ইভেন্টগুলি onclickএবং onmousedownইভেন্টগুলি সরিয়ে দিন The onblurইভেন্ট onDivBlur()এবং cancelEvent()কার্য এবং ফাংশনগুলি এই পরিস্থিতিতে নিরাপদে অপসারণ করা যেতে পারে।
আপনি যদি দ্রুত এটি পরীক্ষা করতে চান তবে এই কোডটি এইচটিএমএল পৃষ্ঠাতে সরাসরি ফেলে দেওয়া হলে কাজ করা উচিত:
<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নন-আইই ব্রাউজারগুলিতে কাজ জানি না o_o