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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML DOM blur() วิธีการ

เมื่อคลิก “รับโฟกัส” –

HTML DOM blur() วิธีการ

เมื่อคลิก "เสียโฟกัส" จะเป็นเหมือนเดิม −

HTML DOM blur() วิธีการ

ในตัวอย่างข้างต้น −

ขั้นแรก เราได้สร้างแท็กสมอที่มี id “Anchor” และ href=”https://www.example.com” -

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

จากนั้นเราได้กำหนดรูปแบบไว้ 2 รูปแบบสำหรับแท็ก anchor เพื่อแยกแยะว่าเมื่อใดที่โฟกัสและใช้งานอยู่และเมื่อไม่ได้ใช้งาน

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 ที่เกี่ยวข้อง ซึ่งในกรณีของเราคือ องค์ประกอบ จากนั้นเรียกใช้เมธอด focus ซึ่งจะเปลี่ยนลิงก์ไปยังรูปแบบ a:focus,a:active เช่น สีจะเป็นสีเขียว ข้อความจะถูกขีดเส้นใต้ และขนาดตัวอักษรเพิ่มขึ้นเป็น 40px

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

ฟังก์ชัน losefocus() รับองค์ประกอบที่มีรหัส "Anchor" ที่เกี่ยวข้องซึ่งเป็นองค์ประกอบ ในกรณีของเรา จากนั้นใช้เมธอด blur() เพื่อคลายโฟกัสจากลิงก์ด้านบนและเปลี่ยนสไตล์ลิงก์เป็นสไตล์ดั้งเดิมสำหรับองค์ประกอบ

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