JS--JavaScript选择文本（select事件）、检测字段值（change事件）

最新推荐文章于 2024-06-01 00:47:17 发布

吴声子夜歌

最新推荐文章于 2024-06-01 00:47:17 发布

阅读量7.9k

点赞数 4

分类专栏： JavaScript 文章标签： JavaScript JS选择文本 select事件 change事件

本文链接：https://blog.csdn.net/cold___play/article/details/101564258

版权

JavaScript 专栏收录该内容

47 篇文章 8 订阅

订阅专栏

选择文本

当在文本框或文本区域内选择文本时，将触发select事件。通过该事件，可以设计用户选择操作的交互行为。

在IE9+、Opera、Firefox、Chrome和Safari中，只有用户选择了文本，而且要释放鼠标，才会触发select事件；但是在IE8及更早版本中，只要用户选择了一个字母，不必释放鼠标，就会触发select事件。另外，在调用select()方法时也会触发select事件。

示例：选择第一个文本框中的文本时，在第二个文本框中动态显示用户所选择的文本。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="a" value="请随意选择字符串" />
		<input type="text" id="b"/>
		<script>
			var a = document.getElementsByTagName("input")[0];
			var b = document.getElementsByTagName("input")[1];
			a.onselect = function(){
				var o = document.selection.createTextRange();//创建一个选择区域
				if(o.text.length > 0){//如果选择区域存在文本
					b.value = o.text;//赋值给b
				}else{
					p1 = a.selectionStart;//获取文本框中选择的初始位置
					p2 = a.selectionEnd;//获取文本框中选择的结束位置
					b.value = a.value.substring(p1, p2)
				}
			}
		</script>
	</body>
</html>

字段值变化检测

change事件类型是在表单元素的值发生变化时触发，它主要用于input、select和textarea元素。对于input和textarea元素来说，当它们失去焦点且value值改变时触发；对于select元素，在其选项改变时触发，也就是说不失去焦点，也会触发change事件

示例1：当在第一个文本框输入或修改值时，第二个文本框会立即显示第一个文本框的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="a"/>
		<input type="text" id="b"/>
		<script>
			var a = document.getElementsByTagName("input")[0];
			var b = document.getElementsByTagName("input")[1];
			a.onchange = function(){
				b.value = this.value;
			}
		</script>
	</body>
</html>

在这里插入图片描述

示例2：在单选按钮选项组中动态显示变化的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="radio" name="r" value="1" checked="checked"/>1
		<input type="radio" name="r" value="2" />2
		<input type="radio" name="r" value="3" />3
		<script>
			var r = document.getElementsByTagName("input");
			for(var i = 0; i < r.length; i++){
				r[i].onchange = function(){
					alert(this.value);
				}
			}
		</script>
	</body>
</html>

对于input元素来说，由于change事件类型仅在用户已经离开了元素，且失去焦点时触发，所以当执行上上面的例子时，会感觉到延迟现象。为了更好的提高用户体验，很多时候会根据需要定义在按钮松开或鼠标单击时执行响应，这样速度会快很多。

示例：设计一个文本框，只允许输入数值。利用focus事件修改文本框的背景颜色，以便更清楚的表明这个字段获得了焦点。利用blur事件恢复背景，利用change事件在用户输入非数字时改变颜色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form id="myform" method="post" action="javascript:alert('提交')">
			<p><label for="comments">请输入数字：</label><br>
				<input type="text" id="txtNumbers" name="numbers"/></p>
			<p><input type="submit" value="提交表单" id="submit-btn"/></p>
		</form>
		<script>
			var form = document.getElementById("myform");
			var numbers = form.elements["numbers"];
			numbers.onfocus = function(event){
				event = event || window.event;
				var target = event.target || event.srcElement;
				target.style.backgroundColor = "yellow";
			}
			numbers.onblur = function(){
				event = event || window.event;
				var target = event.target || event.srcElement;
				if(/[^\d]/.test(target.value)){
					target.style.backgroundColor = "red";
				}else{
					target.style.backgroundColor = "";
				}
			}
			numbers.onchange = function(){
				event = event || window.event;
				var target = event.target || event.srcElement;
				if(/[^\d]/.test(target.value)){
					target.style.backgroundColor = "red";
				}else{
					target.style.backgroundColor = "";
				}
			}
		</script>
	</body>
</html>

文本框获取焦点：
在这里插入图片描述

正确输入数字：
在这里插入图片描述

错误的输入其他字符：
在这里插入图片描述

吴声子夜歌

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
JS--JavaScript选择文本（select事件）、检测字段值（change事件）

选择文本当在文本框或文本区域内选择文本时，将触发select事件。通过该事件，可以设计用户选择操作的交互行为。在IE9+、Opera、Firefox、Chrome和Safari中，只有用户选择了文本，而且要释放鼠标，才会触发select事件；但是在IE8及更早版本中，只要用户选择了一个字母，不必释放鼠标，就会触发select事件。另外，在调用select()方法时也会触发select事件。示...
复制链接

扫一扫