jquery如何獲取和失去焦點事件

本篇內容介紹了“jquery如何獲取和失去焦點事件”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

在jquery中，可以使用focus()方法獲得焦點事件，語法“$(selector).focus()”；可以使用blur()方法失去焦點事件，語法“$(selector).blur()”。

本教程操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。

前端網站中如果存在一些讓用戶填寫內容的表單元素的話，我們可以使用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>

“jquery如何獲取和失去焦點事件”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！