首頁 > web前端 > js教程 > 主體

jquery怎麼取得與失去焦點事件

青灯夜游
發布: 2021-11-19 10:42:15
原創
12720 人瀏覽過

在jquery中,可以使用focus()方法獲得焦點事件,語法「$(selector).focus()」;可以使用blur()方法失去焦點事件,語法「$(selector).blur ()」。

jquery怎麼取得與失去焦點事件

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

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

jquery focus()獲得焦點事件

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

語法:

$(selector).focus()
登入後複製

複製

範例:input 輸入框取得焦點時改變其邊框的顏色

範例程式碼:


登入後複製

複製

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

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

登入後複製

複製

jquery blur()失去焦點事件

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

#語法:

$(selector).blur()
登入後複製

複製

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

範例程式碼:


登入後複製

複製

#運行結果如圖:

jquery怎麼取得與失去焦點事件

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

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

範例程式碼:


登入後複製

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!