一个简单易懂的javascrip selection&range小案例

在制作富文本编辑器，尤其是在制作以div元素为编辑器区域时，当鼠标离开编辑区域以后会失去焦点，失去选区，这时候就要通过selection&range来重新设置选区。【以下代码尚未考虑IE低版本，请在现代浏览器下测试学习】

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>range</title>

	<style type="text/css">

	#edit{

		width: 100%;

		height: 300px;

		border: 1px solid #ccc;

	}

	</style>

</head>

<body>

	<div contenteditable="true" id="edit">

		<p>通过一个富文本编辑器，学习JavaScript！</p>

	</div>

	<div id="button">button</div>

	<script type="text/javascript">

	var edit = document.getElementById('edit');

	var button = document.getElementById('button');

	edit.addEventListener('mouseup', function() {

		saveSelection();

	});

	button.addEventListener('click', function() {

		restoreSelection();

		document.execCommand('underline', false, null);

		saveSelection();

	});

	function saveSelection() {

		selection = document.getSelection();

		save = selection.getRangeAt(0);

	}

	function restoreSelection() {

		var selection = window.getSelection();

		if(selection.rangeCount > 0) {

			selection.removeAllRanges();

		}

		var range = document.createRange();

		selection.addRange(save);

	}

	</script>

</body>

</html>