Phương thức blur() trong JavaScript

• Bùi Tấn Lực
• 965
• 17/09/2025

Chức năng của Phương thức blur() trong JavaScript

Phương thức blur() trong JavaScript dùng để xóa (làm mờ) hành động focus trước đó trên thẻ input hoặc thẻ liên kết a.

Cú pháp của Phương thức blur() trong JavaScript

tenbien.blur();

tenbien: Tên biến là phần tử HTML thường dùng document.getElementById("giá trị id") để lấy.

Code Phương thức blur() trong JavaScript

Phương thức blur() thêm xóa input trong JavaScript

Nhấn nút để thêm focus, nhấn nút để xóa focus trong thẻ input (phương thức blur() thực hiện xóa focus):

<input type="text" id="txtten" placeholder="Nhập Họ Tên" >
<p>Click vào nút Thêm Focus để thêm focus, Click vào nút Xóa Focus để xóa focus</p>
<button type="button" onclick="themFocus()">Thêm Focus</button>
<button type="button" onclick="xoaFocus()">Xóa Focus</button>
<script>
// Thêm Focus
function themFocus() {
  document.getElementById("txtten").focus();
}
// Xóa Focus
function xoaFocus() {
  document.getElementById("txtten").blur();
}
</script>

Chạy Thử

Phương thức blur() thêm xóa a trong JavaScript

Nhấn nút để thêm focus, nhấn nút để xóa focus (phương thức blur() thực hiện xóa focus) trong thẻ liên kết a, thao tác này có kết hợp với css::

<!DOCTYPE html>
<html>
<head>
<title>Phương thức focus() thêm xóa a trong JavaScript</title>
<style>
a:focus, a:active {
  color: red;
}
</style>
</head>
<body>
<a id="alienket" href="https://webmoi.vn/phuong-thuc-focus-them-xoa-a-trong-javascript/" >Liên kết để thao tác</a>
<p>Click vào nút Thêm Focus để thêm focus, Click vào nút Xóa Focus để xóa focus, thao tác này có kết hợp với css</p>
<button type="button" onclick="themFocus()">Thêm Focus</button>
<button type="button" onclick="xoaFocus()">Xóa Focus</button>
<script>
// Thêm Focus
function themFocus() {
  document.getElementById("alienket").focus();
}
// Xóa Focus
function xoaFocus() {
  document.getElementById("alienket").blur();
}
</script>
</body>
</html>

Chạy Thử

Khi Nào Nên Sử Dụng blur() Trong JavaScript?

Phương thức blur() phù hợp khi cần chủ động đưa phần tử ra khỏi trạng thái đang được chọn hoặc đang nhận thao tác từ bàn phím. Trong thực tế, phương thức này thường xuất hiện ở các biểu mẫu, ô tìm kiếm và những giao diện cần kiểm soát trạng thái nhập liệu.

Tự Động Bỏ Focus Sau Khi Người Dùng Nhập Dữ Liệu

Sau khi người dùng hoàn tất một thao tác, JavaScript có thể gọi blur() để đóng trạng thái nhập liệu. Cách này hữu ích với các ô nhập nhanh, nơi người dùng chỉ cần nhập một giá trị rồi chuyển sang thao tác khác.

Ví dụ, sau khi xử lý nội dung của ô nhập, có thể đưa phần tử ra khỏi trạng thái focus:

const input = document.querySelector("input");

input.addEventListener("change", function() {
    input.blur();
});

Việc bỏ focus nên được thực hiện khi thật sự cần thiết. Nếu gọi blur() quá sớm, người dùng có thể phải chọn lại ô nhập và trải nghiệm thao tác sẽ kém tự nhiên.

Kết Hợp focus() Và blur() Để Điều Khiển Ô Nhập

focus() và blur() thường được dùng cùng nhau để kiểm soát thời điểm một phần tử bắt đầu hoặc kết thúc nhận tương tác. Chẳng hạn, một ô tìm kiếm có thể được tự động chọn khi người dùng mở chức năng tìm kiếm và mất focus sau khi hoàn tất thao tác.

const searchInput = document.querySelector("#search");

searchInput.focus();

searchInput.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        searchInput.blur();
    }
});

Cách kết hợp này giúp luồng tương tác rõ ràng hơn: focus() đưa con trỏ vào đúng vị trí cần nhập, còn blur() kết thúc trạng thái nhập khi thao tác đã hoàn tất.

Sử Dụng blur() Khi Kiểm Tra Dữ Liệu Form

Một tình huống phổ biến là kiểm tra dữ liệu ngay sau khi người dùng rời khỏi ô nhập. Khi sự kiện blur xảy ra, JavaScript có thể đọc giá trị, kiểm tra điều kiện và thông báo kết quả mà không cần chờ người dùng gửi toàn bộ biểu mẫu.

const emailInput = document.querySelector("#email");

emailInput.addEventListener("blur", function() {
    if (!emailInput.value.includes("@")) {
        console.log("Địa chỉ email chưa hợp lệ");
    }
});

Cách làm này phù hợp với các trường như email, số điện thoại hoặc mã xác nhận. Tuy nhiên, blur() là phương thức dùng để chủ động làm mất focus, còn việc kiểm tra dữ liệu nên được thực hiện bởi logic xác thực riêng. Tách hai nhiệm vụ này giúp mã JavaScript dễ đọc và dễ bảo trì hơn.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức blur() trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Phương thức blur() trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp