HTML DOM blur()用法及代碼示例

HTML DOM blur() 方法用於從特定元素中移除鍵盤焦點。使用模糊，我們可以為任何 HTML 元素添加模糊或刪除模糊。 blur() 方法可以幫助更好地瀏覽網頁，因為我們可以根據用戶輸入專門關注某個元素。

用法

以下是 blur() 方法的語法 -

Object.blur()

示例

讓我們看一個 blur() 方法的例子 -

<!DOCTYPE html>
<html>
<head>
<style>
   a{
      text-decoration:none;
      font-size:20px;
   }
   a:focus, a:active {
      color:red;
      text-decoration:underline;
      font-size:40px;
   }
</style>
</head>
<body>
<a id="Anchor" href="https://example.com">example.com</a>
<p>Give focus or remove focus…</p>
<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">
<script>
   function getfocus() {
      document.getElementById("Anchor").focus();
   }
   function losefocus() {
      document.getElementById("Anchor").blur();
   }
</script>
</body>
</html>

輸出

這將產生以下輸出 -

點擊 “Get focus” -

單擊 “Lose focus” 時，它將與原始相同 -

在上麵的例子中 -

我們首先創建了一個帶有 id “Anchor” 和 href=”https://www.example.com” 的錨標簽 -

<a id="Anchor" href="https://example.com">example.com</a>

然後我們為錨點標簽定義了兩種樣式，以區分它何時處於焦點和活動狀態以及何時不處於活動狀態。

a{
   text-decoration:none;
   font-size:20px;
}
a:focus, a:active {
   color:red;
   text-decoration:underline;
   font-size:40px;
}

然後我們創建了兩個按鈕 “Get focus” 和 “Lose focus” 來分別執行 getfocus() 和 losefocus() 函數。

<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">

getfocus() 函數獲取與 “Anchor” id 關聯的元素，在我們的例子中是 <anchor> 元素。然後執行它的 focus 方法，該方法將更改指向 a:focus,a:active 樣式的鏈接，即顏色將為綠色, 文本將帶有下劃線並且字體大小增加到 40px。

function getfocus() {
   document.getElementById("Anchor").focus();
}

losefocus() 函數獲取與 “Anchor” id 關聯的元素，在我們的例子中是 <anchor> 元素。然後它執行它的 blur() 方法來從上麵的鏈接中釋放焦點並將鏈接樣式更改為 <a> 元素的原始樣式。

function losefocus() {
   document.getElementById("Anchor").blur();
}

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM blur() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。