在jquery中，可以使用focus()方法獲得焦點事件，語法「$(selector).focus()」；可以使用blur()方法失去焦點事件，語法「$(selector).blur ()」。
本教學操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。
前端網站中如果存在一些讓使用者填寫內容的表單元素的話，我們可以使用JQ中獲得焦點事件和失去焦點事件，來給使用者作出一些提示的內容。今天我們就說說JQuery下獲得焦點和失去焦點的事件的使用方法。
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;">
複製
blur()方法：當元素失去焦點時發生blur 事件
#語法：
$(selector).blur()
複製
範例：input失去焦點後，彈出輸入框中的內容
範例程式碼：
<input type="text" name="" id="mochu">
<script>
$('#mochu').blur(function(){
alert($(this).val());
});
</script>複製
#運行結果如圖：
JQuery中的blur()失去焦點事件，我們可以用來檢查使用者在input輸入框中輸入的內容是否合法，例如以下程式碼，如果使用者輸入的內容少於五個字元就給出提示
範例程式碼：
<input type="text" name="" id="mochu">
<script>
$('#mochu').blur(function(){
if($(this).val().length < 5){
alert('字数太少了，多输入几个吧');
}
});
</script>相關教學推薦：jQuery影片教學
以上是jquery怎麼取得與失去焦點事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
