Phương thức focus() trong JavaScript
Bùi Tấn Lực - 1003
- 17/09/2025
Chức năng của Phương thức focus() trong JavaScript
Phương thức focus() trong JavaScript dùng để thực hiện hành động khi người dùng click vào thẻ input hoặc một liên kết thẻ a.
Cú pháp của Phương thức focus() trong JavaScript
tenbien.focus();
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 focus() trong JavaScript
Phương thức focus() nhập chữ ngay trong JavaScript
Tự động nhập chữ mà không click vào input, ngay khi bạn vừa load trang xong là con trỏ chuột ở ngay ô input:
<input type="text" id="txtten" placeholder="Nhập Họ Tên" >
<p>Tự động nhập họ tên mà không click vào input, ngay khi bạn vừa load trang xong là con trỏ chuột ở ngay ô input</p>
<script>
document.getElementById("txtten").focus();
</script>
Phương thức focus() thêm xóa input trong JavaScript
Nhất nút để thêm focus, nhấn nút để xóa focus trong thẻ input:
<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>
Phương thức focus() thêm xóa a trong JavaScript
Nhất nút để thêm focus, nhấn nút để 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>
Những lưu ý khi sử dụng focus() trong JavaScript
Khi sử dụng focus(), việc đưa con trỏ vào đúng phần tử mới chỉ là bước đầu. Trong giao diện thực tế, thao tác này có thể ảnh hưởng đến vị trí cuộn trang hoặc cần phối hợp với các sự kiện khác để tạo trải nghiệm nhập liệu tự nhiên hơn.
Vì sao focus() có thể làm trang tự động cuộn?
Khi gọi focus() trên một phần tử có khả năng nhận focus nhưng đang nằm ngoài vùng hiển thị, trình duyệt thường cố gắng đưa phần tử đó vào vùng người dùng có thể nhìn thấy. Vì vậy, trang có thể tự động thay đổi vị trí cuộn.
Hành vi này hữu ích khi người dùng cần được đưa ngay đến ô nhập liệu, nhưng có thể gây khó chịu nếu focus() được gọi khi đang mở hộp thoại, cập nhật giao diện hoặc thực hiện một thao tác không yêu cầu thay đổi vị trí trang.
Ví dụ, một nút nằm phía trên có thể đưa focus xuống ô nhập liệu ở cuối trang:
document.getElementById("email").focus();
Nếu phần tử email đang nằm ngoài vùng nhìn thấy, trình duyệt có thể tự cuộn đến vị trí của phần tử này.
Cách sử dụng focus() mà không làm thay đổi vị trí cuộn
JavaScript cho phép truyền tùy chọn preventScroll khi gọi focus(). Đặt giá trị này thành true giúp phần tử nhận focus nhưng hạn chế việc trình duyệt tự động cuộn đến phần tử đó.
document.getElementById("email").focus({
preventScroll: true
});
Cách này phù hợp khi giao diện cần giữ nguyên vị trí hiện tại, chẳng hạn khi cập nhật một biểu mẫu đang nằm trong khu vực cuộn hoặc khi mở một thành phần tương tác mà không muốn làm người dùng mất vị trí đang xem.
Cần lưu ý rằng preventScroll chỉ kiểm soát hành vi cuộn phát sinh từ việc focus phần tử. Nếu đoạn mã khác chủ động thay đổi vị trí cuộn, tùy chọn này không ngăn được thao tác đó.
Khi nào nên kết hợp focus() với blur() và các sự kiện focus?
Trong biểu mẫu và giao diện tương tác, focus() thường nên được sử dụng cùng các thao tác hoặc sự kiện liên quan đến trạng thái focus. Chẳng hạn, có thể đưa người dùng trở lại ô nhập liệu sau khi kiểm tra dữ liệu không hợp lệ, hoặc loại bỏ focus khỏi phần tử khi hoàn tất một thao tác.
const input = document.getElementById("email");
input.addEventListener("blur", function() {
if (input.value.trim() === "") {
input.focus();
}
});
Tuy nhiên, không nên gọi focus() một cách liên tục trong các sự kiện focus hoặc blur. Nếu logic xử lý khiến phần tử liên tục mất và nhận focus, giao diện có thể trở nên khó thao tác và tạo ra chuỗi sự kiện không mong muốn.
Với những giao diện phức tạp, nên xác định rõ khi nào cần đưa focus đến phần tử, khi nào cần loại bỏ focus và trường hợp nào chỉ cần theo dõi thay đổi trạng thái. Cách tổ chức này giúp mã JavaScript dễ kiểm soát hơn và hạn chế những thay đổi giao diện ngoài ý muốn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Phương thức focus() trong JavaScript.
- 0 Bình luận
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 *
