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

Phương thức HTML DOM focus () được sử dụng để tạo tiêu điểm cho một phần tử HTML. Không thể áp dụng tiêu điểm cho tất cả phần tử HTML, ví dụ:Bạn không thể lấy tiêu điểm thẻ

. Để xóa tiêu điểm khỏi một phần tử, hãy sử dụng phương thức mờ ().

Cú pháp

Sau đây là cú pháp -

HTMLElementObject.focus()

Ví dụ

Hãy cùng chúng tôi xem xét một ví dụ về phương thức focus () -

<!DOCTYPE html>
<html>
<head>
<style>
   input[type=text]:focus, p: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() method example</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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

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

Khi nhấp vào nút TẬP TRUNG -

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

Khi nhấp vào nút BLUR -

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

Trong ví dụ trên -

Đầu tiên, chúng tôi đã tạo một hộp văn bản có id “USR1” và giá trị thuộc tính size và maxlength tương ứng bằng 5 và 10.

<label>USERNAME :<input id="USR1" type="text" size=5 maxlength=10></label>

Chúng tôi đã tạo hai kiểu css khác nhau khi hộp văn bản được lấy nét, đang hoạt động và khi không -

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;
}

Sau đó, chúng tôi đã tạo hai nút FOCUS và BLUR sẽ thực thi phương thức enableFocus () và disableFocus () tương ứng khi người dùng nhấp vào -

<input type="button" onclick="enableFocus()" value="FOCUS">
<input type="button" onclick="disableFocus()" value="BLUR">

Phương thức enableFocus () nhận phần tử đầu vào có kiểu “text” bằng cách sử dụng phương thức getElementById () và cho phép phương thức focus () của nó để đặt tiêu điểm trên hộp văn bản áp dụng kiểu:tiêu điểm cho hộp văn bản của chúng ta. Phương thức disableFocus () nhận phần tử đầu vào có id “USR1” và gọi phương thức dim () trên đó, phương thức này sẽ xóa tiêu điểm khỏi hộp văn bản áp dụng kiểu css bình thường của chúng ta cho nó, tức là nó trở về kiểu mặc định -

function enableFocus() {
   document.getElementById("USR1").focus();
}
function disableFocus() {
   document.getElementById("USR1").blur();
}