首页 >web前端 >js教程 > 正文

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

转载2021-04-29 09:17:370971
本篇文章给大家介绍一下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中文网最新课程二维码

声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除

  • 相关标签:js 失去焦点
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    醉折花枝作酒筹

    飞花飘絮,霓裳翩翩舞,几多情愫心飞扬。

    最近文章
    Django修改了css文件不生效怎么办811
    arcgis图层栏不见了怎么办778
    word无法读取文档,文档可能损坏怎么办931
    推荐视频教程
  • JavaScript基本语法及基本语句视频教程JavaScript基本语法及基本语句视频教程
  • JavaScript深入视频教程JavaScript深入视频教程
  • JavaScript极速入门JavaScript极速入门
  • JavaScript对象与常用设计模式JavaScript对象与常用设计模式
  • JavaScript 经典案例JavaScript 经典案例
  • 视频教程分类