llh911001/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <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>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>

	<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>

	</body>
	</html>