本篇文章为大家展示了如何理解JavaScript用户登录表单中的焦点事件，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
一、前言
=在Web项目开发中，经常会在表单验证功能看到焦点事件。例如，文本框获取焦点改变文本框的颜色，文本框失去焦点检验输入的文本框的内容是否正确等。=
二、项目准备
开发工具：HBuilderX
浏览器：Google Chrome浏览器
三、项目目标
1.掌握焦点事件的使用。
2.理解获取焦点和失去焦点知识。
3.学会运用封装函数。
四、项目实现
HTML
<div id="box"> <div id="img"> <img src="img/1.jpg" /> </div> <div id="form"> <label>账号：<input type="text" id="user"></label> <label>密码：<input type="text" id="pwd"></label> <div id="btn"> <button id="btn_ok">登录</button> <button id="btn_ok">注册</button> </div> </div> <div id="show"></div> </div>在上面代码中，div的id为box相当于一个大盒子，div的id为img、form、show为小盒子。
id为img主要是放置图片;
id为form主要是放置表单，在里面嵌套还有一个div，它的id为btn，主要是放置登录、注册按钮;
id为show是用来显示提示信息。
CSS3
#box{ margin-top: 20px; width: 800px; height: 400px; display: flex; text-align: center; flex-direction: column; justify-content: center; } #form{ display: flex; flex-direction: column; justify-content: center; } #btn{ display: flex; text-align: center; flex-direction: row; justify-content: center; } #user{ margin-bottom: 10px; } #btn_ok{ margin-top: 10px; margin-right: 20px; } #show{ margin-top: 10px; color: red; }在上面代码中，#box表示大盒子的样式，宽度和高度分别为800、400px，margin-top属性表示上外边距为20px，使用弹性布局display: flex;
flex-direction属性表示控制主轴的方向，colum表示垂直方向，row表示水平方向。
justify-content属性表示项目在主轴上的对齐方式，center表示中间。
text-align属性表示文字对齐方式。
margin-bottom属性表示设置元素的下外边距。
margin-right属性表示设置元素的右外边距。
JavaScript
1.获取元素操作的对象
function $(id){ return document.getElementById(id); }在上面代码中，$(id)函数用于根据id获取元素。
id参数表示标签元素自定义的id名称，例如，a标签的id="abc"，获取该元素对象调用$('abc')函数就可以获取元素的对象。
2.给指定元素添加失去焦点事件
function addBlur(m){ m.onblur=function(){ isEmpty(this); } }在上面代码中，指定元素添加失去焦点方法是onblur方法。调用isEmpty()函数判断表单是不是为空。
3.检验指定元素失去焦点，它的value值是不是为空
window.onload=function(){ addBlur($('user')); addBlur($('pwd')); }在上面代码中，window.onload表示页面一加载就触发。
检验id为user和pass的元素如果失去焦点，它的value值是不是为空。
4.检验表单是不是为空
function isEmpty(m){ if(m.value===''){ $('show').style.display='block'; $('show').innerHTML='您输入的内容不能为空！'; }else{ $('show').style.display='none'; } }在上面代码中，如果表单内容为空，向id为show对象中插入提示内容。
5.处理登录按钮事件——判断账号和密码是否正确
$('btn_ok').onclick=function(){ if(($('user').value=='abc')&&($('pwd').value=='123')){ $('show').style.display='block'; $('show').innerHTML='登录成功！'; }else{ $('show').style.display='block'; $('show').innerHTML='账号或密码错误！'; } }在上面代码中，处理登录按钮事件，判断账号和密码输入框内容分别是否是abc、123。如果账号和密码输入正确或错误，向id为show对象中插入提示内容。
效果图如下所示:
在JavaScript中首先获取操作元素的对象，给指定元素添加失去焦点事件，之后，检验指定元素失去焦点，它的value值是否为空，检验表单是否为空。最后处理登录按钮的事件。
上述内容就是如何理解JavaScript用户登录表单中的焦点事件，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网行业资讯频道。
