jquery點擊input觸發什麼事件嗎

點擊input觸發“焦點focus事件”，表示該input元素被選中，可以被操作，在頁面畫面中閃爍的小垂直線。在jquery中可以使用focus()方法觸發或給元素綁定焦點事件，語法「$(selector).focus()」或「$(selector).focus(function)」。

本教學操作環境：windows7系統、jquery3.6.1版本、Dell G3電腦。

jquery點擊input觸發「焦點focus事件」。

焦點是關注的區域，也就是當前遊標被啟動的位置，在頁面畫面中閃爍的小豎線，表示網頁某個控制項被選中，可以被操作。滑鼠點擊可獲得遊標，Tab鍵可依照設定的Tabindex切換焦點。

例如一個input文字方塊獲得焦點，你在點擊input元素就直接進入了input文字方塊；也例如一個下拉式列錶框獲得焦點，你按下鍵盤上的向下箭頭，它就會把清單列出來。程式中還有獲得焦點發生的事件（gotfocus())和失去焦點發生的事件(lostfocus())以及為控制項設定焦點方法（setfocus())。利用好焦點，能使你的程式顯得非常人性化。

當元素獲得焦點時，發生 focus 事件。當透過滑鼠點擊選取元素或透過 tab 鍵定位到元素時，該元素就會獲得焦點。

jquery focus()獲得焦點事件

#focus() 方法觸發 focus 事件，或規定發生 focus 事件時運行的函數。

語法：

//触发 focus 事件
$(selector).focus()

//将函数绑定到 focus 事件
$(selector).focus(function)

範例：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;">

#擴充知識：blur()方法設定失去焦點事件

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

語法：

//触发 blur 事件
$(selector).blur()

//将函数绑定到 blur 事件
$(selector).blur(function)

範例：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影片教學、web前端影片】

以上是jquery點擊input觸發什麼事件嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！