JavaScript如何获取焦点和失去焦点

2022-12-08 15:13:01 来源：用户：

跟大家讲解下有关JavaScript如何获取焦点和失去焦点，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说JavaScript如何获取焦点和失去焦点，小编也收集到了有关JavaScript如何获取焦点和失去焦点的相关资料，希望大家看到了会喜欢。

本篇文章给大家介绍一下JavaScript获取焦点和失去焦点的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

焦点处理

焦点处理主要包括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如何获取焦点和失去焦点的详细内容，更多请关注php中文网其它相关文章！

来源：php中文网

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。如有侵权请联系删除！