JS--JavaScript焦点处理（获取焦点focus、失去焦点blur）

客官°小女子只卖身不卖艺 2021-08-13 14:16 797阅读 0赞

#### 焦点处理 ####

焦点处理主要包括focus（获取焦点）和blur（失去焦点）事件类型。所谓焦点，就是激活表单字段，使其可以响应键盘事件。

#### 获取焦点：focus ####

当单击或使用Tab键切换到某个表单元素或超链接对象时，会触发该事件。focus事件是确定页面内鼠标当前定位的一种方式。在默认情况下，整个文档处于焦点状态，但是单击或者使用Tab键可以改变焦点位置。‘

示例：在页面加载完毕后，将焦点转移到表单中的第一个文本框字段，让其准备接收用户输入

<form id="myform" method="post" action="#">
    	姓名<input type="text" name="name"/><br>
    	密码<input type="password" name="pass" />
    </form>
    <script>
    	var form = document.getElementById("myform");
    	var field = form.elements("name");
    	window.onload = function(){ 
    		field.focus();
    	}
    </scriipt>

#### 失去焦点：blur ####

blur事件类型表示在元素失去焦点时响应，它与focus事件类型是对应的，主要作用于表单元素和超链接对象

示例：为所有输入表单元素绑定了focus和blur事件处理函数，设置当元素获取焦点时呈凸起，失去焦点呈凹陷

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<input type="text" />
    		<input type="text" />
    		<script>
    			var o = document.getElementsByTagName("input");
    			for(var i = 0; i < o.length; i++){ 
    				o[i].onfocus = function(){ 
    					this.style.borderStyle = "outset";
    				}
    				o[i].blur = function(){ 
    					this.style.borderStyle = "inset";
    				}
    			}
    		</script>
    	</body>
    </html>

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

注意：如果时隐藏字段（< input type=“hidden” >），或者使用CSS的display和visibility隐藏字段显示，设置其获取焦点将引发异常。

[20190927211704715.png]: /images/20210813/525aa804e567456a944d12e90abe9423.png