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

谁践踏了优雅 2021-08-14 00:17 330阅读 0赞

#### 选择文本 ####

当在文本框或文本区域内选择文本时，将触发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>

![在这里插入图片描述][20190927221049858.png]

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

文本框获取焦点：  
![在这里插入图片描述][20190927222441709.png]

正确输入数字：  
![在这里插入图片描述][20190927222526427.png]

错误的输入其他字符：  
![在这里插入图片描述][20190927222551665.png]

[20190927221049858.png]: /images/20210813/621074cd60894eb39a60cfd9aae8f956.png
[20190927222441709.png]: /images/20210813/ad3821097eb646f4bc8ec783cf2e1984.png
[20190927222526427.png]: /images/20210813/8d9e2a049feb47ffafc68059467b81c1.png
[20190927222551665.png]: /images/20210813/1c0ff6758faf4a738d7a6f1937e8b0b0.png