เมธอด focus() ใน HTML DOM

เมธอด focus() ใน HTML DOM ใช้สำหรับให้โฟกัส (focus) กับองค์ประกอบ HTML ไม่ใช่ทุกองค์ประกอบที่รองรับโฟกัสได้ (เช่น <p> ไม่สามารถโฟกัสได้) หากต้องการเอาโฟกัสออก ให้ใช้เมธอด blur()

ไวยากรณ์ (Syntax)

HTMLElementObject.focus()

ตัวอย่าง

ตัวอย่างการให้และเอาโฟกัสของช่องป้อนข้อความ:

<!DOCTYPE html>
<html>
<head>
<style>
  input[type=text]:focus, input[type=text]:active {
    color: blue;
    font-size: 35px;
    background-color: lightpink;
    border: 2px solid blue;
  }
  input[type=text] {
    color: black;
    font-size: 20px;
  }
</style>
<script>
  function enableFocus() {
    document.getElementById("USR1").focus();
  }
  
  function disableFocus() {
    document.getElementById("USR1").blur();
  }
</script>
</head>
<body>
<h1>ตัวอย่างเมธอด focus()</h1>
<label>USERNAME: <input id="USR1" type="text" size="5" maxlength="10"></label>
<br><br>
<input type="button" onclick="enableFocus()" value="FOCUS">
<input type="button" onclick="disableFocus()" value="BLUR">
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงช่องป้อนข้อความขนาดปกติ และปุ่ม "FOCUS", "BLUR"

เมื่อคลิก "FOCUS" ช่องป้อนจะได้รับโฟกัส: ตัวอักษรสีน้ำเงิน ขนาด 35px พื้นหลังสีชมพูอ่อน กรอบสีน้ำเงิน

เมื่อคลิก "BLUR" โฟกัสจะหาย ช่องป้อนกลับสู่รูปแบบปกติ

คำอธิบายโค้ด

• สร้างช่องป้อน id="USR1" type="text" size=5 maxlength=10
• กำหนด CSS สำหรับสถานะ :focus และ :active (สีน้ำเงิน, ใหญ่, พื้นหลังชมพู) และสถานะปกติ
• สร้างปุ่ม "FOCUS" เรียก enableFocus() และ "BLUR" เรียก disableFocus()
• enableFocus() เรียก .focus() บนช่องป้อน ใช้สไตล์ :focus
• disableFocus() เรียก .blur() บนช่องป้อน กลับสู่สไตล์ปกติ