Phương thức HTML DOM focus()

Phương thức focus() trong HTML DOM dùng để đặt focus (tập trung) cho một phần tử HTML. Không phải phần tử nào cũng nhận focus được (ví dụ: <p> không thể focus). Để bỏ focus, dùng phương thức blur().

Cú pháp

HTMLElementObject.focus()

Ví dụ

Ví dụ bật/tắt focus cho ô nhập văn bản bằng hai nút:

<!DOCTYPE html>
<html>
<head>
<style>
  input[type=text]:focus {
    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>Ví dụ phương thức focus()</h1>
<label>TÊN ĐĂNG NHẬP: <input id="USR1" type="text" size="5" maxlength="10"></label>
<br><br>
<button onclick="enableFocus()">FOCUS</button>
<button onclick="disableFocus()">BỎ FOCUS</button>
</body>
</html>

Kết quả

Ban đầu ô nhập liệu hiển thị bình thường (chữ đen, cỡ 20px).

Nhấn "FOCUS": ô nhập liệu nhận focus, áp dụng style :focus (chữ xanh, cỡ 35px, nền hồng nhạt, viền xanh).

Nhấn "BỎ FOCUS": ô mất focus, quay về style mặc định.

Giải thích

• Ô input id="USR1", type="text", size=5, maxlength=10.
• CSS định nghĩa style cho trạng thái bình thường và :focus.
• Hai nút gọi enableFocus() (gọi .focus()) và disableFocus() (gọi .blur()).
• Khi focus, trình duyệt áp dụng CSS :focus; khi blur, áp dụng style mặc định.