如何理解JavaScript用戶登錄表單中的焦點事件

本篇文章為大家展示了如何理解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用戶登錄表單中的焦點事件，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。