JS--JavaScript焦点处理(获取焦点focus、失去焦点blur)

焦点处理
焦点处理主要包括focus(获取焦点)和blur(失去焦点)事件类型。所谓焦点,就是激活表单字段,使其可以响应键盘事件。
获取焦点:focus
当单击或使用Tab键切换到某个表单元素或超链接对象时,会触发该事件。focus事件是确定页面内鼠标当前定位的一种方式。在默认情况下,整个文档处于焦点状态,但是单击或者使用Tab键可以改变焦点位置。‘
示例:在页面加载完毕后,将焦点转移到表单中的第一个文本框字段,让其准备接收用户输入
var form = document.getElementById("myform");
var field = form.elements("name");
window.onload = function(){
field.focus();
}
失去焦点:blur
blur事件类型表示在元素失去焦点时响应,它与focus事件类型是对应的,主要作用于表单元素和超链接对象
示例:为所有输入表单元素绑定了focus和blur事件处理函数,设置当元素获取焦点时呈凸起,失去焦点呈凹陷
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";
}
}
注意:如果时隐藏字段(< input type=“hidden” >),或者使用CSS的display和visibility隐藏字段显示,设置其获取焦点将引发异常。