javascript如何处理焦点

javascript处理焦点的方法：1、通过“field.focus(); ”方法获取焦点；2、通过“o[i].blur = function(){ ...} ”方法处理失去焦点。

本文操作环境：windows7系统、javascript1.8.5版、DELL G3电脑

javascript如何处理焦点？

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

焦点处理

焦点处理主要包括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>
    

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

推荐学习：《javascript基础教程》

以上就是javascript如何处理焦点的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！