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>
    $(&#39;#mochu&#39;).focus(function(){
        $(this).css(&#39;border-color&#39;,&#39;red&#39;);
    });
</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>
    $(&#39;#mochu&#39;).blur(function(){ 
    alert($(this).val());    
    });
 </script>

複製

#運行結果如圖：

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

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

範例程式碼：

<input type="text" name="" id="mochu">
<script>
    $(&#39;#mochu&#39;).blur(function(){
        if($(this).val().length < 5){
            alert(&#39;字数太少了，多输入几个吧&#39;);
        }
    });
</script>

相關教學推薦：jQuery影片教學

以上是jquery怎麼取得與失去焦點事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！