jquery獲得焦點和失去焦點

前端網站中如果存在一些讓用戶填寫內容的表單元素的話，我們可以使用JQ中獲得焦點事件和失去焦點事件，來給用戶作出一些提示的內容。今天我們就說一說JQuery下獲得焦點和失去焦點的事件的使用方法。

jquery focus()獲得焦點事件

focus()方法：當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。

語法：

$(selector).focus()

復制

例：input 輸入框獲得焦點時改變其邊框的顏色

示例代碼：

<input type="text" name="" id="mochu"> <script> $('#mochu').focus(function(){ $(this).css('border-color','red'); }); </script>

復制

當鼠標移入input中並點擊時，input元素會變成如下的形式

jq focus()事件，會為input加入一個CSS樣式

<input type="text" name="" id="mochu" style="border-color: red;">

復制

jquery blur()失去焦點事件

blur()方法：當元素失去焦點時發生 blur 事件

語法：

$(selector).blur()

復制

例：input失去焦點后，彈出輸入框中的內容

示例代碼：

<input type="text" name="" id="mochu"> <script> $('#mochu').blur(function(){ alert($(this).val()); }); </script>

復制

運行結果如圖：

利用jq blur()失去焦點事件來驗證用戶輸入的內容

JQuery中的blur()失去焦點事件，我們可以用來檢查用戶在input輸入框中輸入的內容是否合法，比如以下代碼，如果用戶輸入的內容少於五個字符就給出提示

示例代碼：

<input type="text" name="" id="mochu"> <script> $('#mochu').blur(function(){ if($(this).val().length < 5){ alert('字數太少了，多輸入幾個吧'); } }); </script>