CSS/range.html at master · wangfulin/CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>

		</style>
		<script>
			window.onload=function(){
				var content=document.getElementById("content");
				var display=document.getElementById("display");
				var selection;
				window.onmouseup=window.onmousemove=function(){
					selection=document.getSelection();
					//console.log("test");
					if(selection.rangeCount>0){
						var range=selection.getRangeAt(0).toString();
						//console.log(range.toString());
						if(range&&range.trim()!==''){
							display.innerText=range;
						}else{
							display.innerText="";
						}
					}else{
						display.innerText="";
					}
				}
			}
		</script>
	</head>
	<body>
		<div class="word-to-select" id="content">
			This is a test to range and selection
		</div>
		<div class="word-selected" id="display">

		</div>
	</body>
</html>