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

jquery focus()獲得焦點事件

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

語法:

$(selector).focus()

国产视频app 例:input 輸入框獲得焦點時改變其邊框的顏色

示例代碼:

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

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

国产视频app jq focus()事件,會為input加入一個CSS樣式

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

jquery blur()失去焦點事件

国产视频app blur()方法:當元素失去焦點時發生 blur 事件

語法:

$(selector).blur()

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

示例代碼:

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

運行結果如圖:

QQ截圖20190506203906.png

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

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

示例代碼:

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