JavaScript如何取得焦點和失去焦點-js教程-PHP中文網

JavaScript如何取得焦點和失去焦點

醉折花枝作酒筹

發布： 2021-04-29 09:17:37

轉載

4262 人瀏覽過

本篇文章要為大家介紹JavaScript取得焦點和失去焦點的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

JavaScript如何取得焦點和失去焦點

焦點處理

焦點處理主要包括focus（取得焦點）和blur（失去焦點）事件類型。所謂焦點，就是啟動表單字段，使其可以回應鍵盤事件。

取得焦點：focus

當點選或使用Tab鍵切換到某個表單元素或超連結物件時，會觸發該事件。 focus事件是確定頁面內滑鼠目前定位的一種方式。在預設情況下，整個文件處於焦點狀態，但是按一下或使用Tab鍵可以改變焦點位置。 '

範例：在頁面載入完畢後，將焦點轉移到表單中的第一個文字方塊字段，讓其準備接收使用者輸入

<form id="myform" method="post" action="#">
	姓名<input type="text" name="name"/><br>
	密码<input type="password" name="pass" /></form><script>
	var form = document.getElementById("myform");
	var field = form.elements("name");
	window.onload = function(){
		field.focus();
	}</scriipt>

登入後複製

失去焦點：blur

blur事件類型表示在元素失去焦點時回應，它與focus事件類型是對應的，主要作用於表單元素和超連結物件

#範例：為所有輸入表單元素綁定了focus和blur事件處理函數，設定當元素取得焦點時呈現凸起，失去焦點呈現凹陷

<!DOCTYPE html><html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" />
		<input type="text" />
		<script>
			var o = document.getElementsByTagName("input");
			for(var i = 0; i < o.length; i++){
				o[i].onfocus = function(){
					this.style.borderStyle = "outset";
				}
				o[i].blur = function(){
					this.style.borderStyle = "inset";
				}
			}
		</script>
	</body></html>

登入後複製

JavaScript如何取得焦點和失去焦點