文本的选中

534 阅读1分钟

选中文本分为两种情况:选中输入框中的文本和选中非输入框中的文本

1.选中输入框(text和textarea)中的文本

<!DOCTYPE html>
<html>
<head>
	<title>selectText</title>
</head>
<body>

	<input type="text" class="content" value="abcdefghijklmnopqrstuvwxyz" />
	<br />
	<button class="button">选中第5个字到第10个字之间的内容</button>

	<script type="text/javascript">
		var content=document.querySelector(".content");
		var button=document.querySelector(".button");
		button.addEventListener("click",function(){
			content.focus();				//将焦点定位到content元素
			content.setSelectionRange(5,9);		//选中文本
		});
	</script>
	
</body>
</html>

2.选中非输入框中的文本

<!DOCTYPE html>
<html>
<head>
	<title>selectText</title>
</head>
<body>
  
	<span class="content">abcdefghijklmnopqrstuvwxyz</span>
	<br />
	<button class="button">选中第5个字到第10个字之间的内容</button>
  
	<script type="text/javascript">
		var content=document.querySelector(".content");
		var button=document.querySelector(".button");
		button.addEventListener("click",function(){
			var range=document.createRange();		//创建一个包含节点和文本节点的部分的文档的片段
			range.setStart(content.firstChild,5);	//设置片段的起始位置
			range.setEnd(content.firstChild,9);		//设置片段的终点位置
			var selection2 = window.getSelection();	//获取用户选择的文本范围
		    selection2.removeAllRanges();			//清空用户选择的文本范围
		    selection2.addRange(range);				//将之前获得的片段添加到用户选择的文本范围
		});
	</script>
  
</body>
</html>