jquery焦點事件有哪些

jquery焦點事件有兩個：1、focus獲取焦點事件，可以使用可以使用focus()方法來觸發focus事件，或規定當發生focus事件時執行的事件處理常式，語法「$(選擇器).focus(function)」。2、blur失去焦點事件，可以使用blur()方法觸發blur事件，或規定當發生blur事件時執行的事件處理常式，語法「$(選擇器).blur(function)」。

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

jquery焦點事件有兩個：獲取焦點focus()和失去焦點blur()。

jquery focus()獲取焦點事件

當元素獲得焦點時，發生 focus 事件。

當通過滑鼠點選選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。

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

語法

//觸發 focus 事件
$(selector).focus()

//將函數繫結到 focus 事件
$(selector).focus(function)
登入後複製

function：可選。規定當發生 focus 事件時執行的函數。

範例：focus() 方法獲得焦點

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function(){
		  $("input").focus(function(){
		    $("input").css("background-color","#FFFFCC");
		  });
		});
		</script>
	</head>
	<body>

		輸入你的名字: <input type="text">

	</body>
</html>
登入後複製

jquery blur()失去焦點事件

當元素失去焦點時發生 blur 事件。

blur() 方法觸發 blur 事件，或規定當發生 blur 事件時執行的函數。

提示：該方法常與 focus() 方法一起使用。

語法

//為被選元素觸發 blur 事件：
$(selector).blur()

//新增函數到 blur 事件：
$(selector).blur(function)
登入後複製

範例：blur() 方法失去焦點

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("input").focus(function() {
					$("input").css("background-color", "#FFFFCC");
				});
				$("input").blur(function() {
					$("input").css("background-color", "#D6D6FF");
				});
			});
		</script>
	</head>
	<body>
		使用者名稱: <input type="text" />
		<p>請在上面的輸入域中點選，使其獲得焦點，然後在輸入域外面點選，使其失去焦點。</p>
	</body>
</html>
登入後複製

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

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

範例程式碼：

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

【推薦學習：、】

以上就是jquery焦點事件有哪些的詳細內容，更多請關注TW511.COM其它相關文章！