JavaScript如何获取和失去焦点

最新推荐文章于 2024-08-26 09:13:28 发布

浅醉碎星河

最新推荐文章于 2024-08-26 09:13:28 发布

阅读量1.2w

点赞数 3

分类专栏： javascript 文章标签： javascript

原文链接：https://www.php.cn/js-tutorial-475205.html

版权

javascript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

本文介绍了JavaScript中的焦点处理，包括focus和blur事件。focus事件用于获取焦点，如在页面加载后使文本框获得焦点；blur事件则表示元素失去焦点。示例展示了如何在元素获取和失去焦点时改变其样式。请注意，隐藏字段无法设置焦点。

摘要由CSDN通过智能技术生成

本篇文章给大家介绍一下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>

在这里插入图片描述