Cách tự động focus vào trường input đầu tiên của form với Vanilla JavaScript

Học cách tự động focus vào trường input đầu tiên khi tải trang trong form HTML

Một trong những tiền đề cơ bản của UX Design tốt là tiết kiệm tối đa bước để từ A đến B để người dùng đạt mục tiêu nhanh.

Không ai thích điền form, nhất là form dài, nên hãy tiết kiệm chút thời gian cho người dùng bằng cách auto-focus trường input đầu tiên trong form HTML khi tải trang.

Form HTML

Thêm mã form này vào tài liệu HTML:

<form> First name:<br> <input type="text" name="firstname" id="firstField"><br>Last name:<br> <input type="text" name="lastname"><br>Country:<br> <input type="text" name="lastname"> </form>

JavaScript

Thêm hàm onload JavaScript này vào file .js:

window.onload = function() { document.getElementById("firstField").focus(); };

Demo auto-focus input field khi tải trang

Xem demo dưới:

https://codepen.io/StrengthandFreedom/pen/yLypogQ

Cách mã hoạt động

Nhìn form HTML. ID trong trường input đầu tiên trong form HTML gọi là firstField — đây là thứ chúng ta nhắm đến bằng JavaScript.

Trong JavaScript, thiết lập sự kiện onload gọi là window.onload chạy ngay khi bạn vào trang mới hoặc refresh trình duyệt.

Sự kiện onload thực thi hàm tìm trường input với ID firstField qua document.getElementById rồi dùng phương thức focus() của JavaScript để đặt trạng thái của trường input thành focus.

Xử lý sự cố

Viền focus biến mất khỏi trường input đột ngột? Đó là vì mã chúng ta viết chỉ auto-focus trường input đầu tiên một lần mỗi lần tải trang. Nếu bạn làm bất kỳ điều gì ngoài việc gõ ngay vào trường input auto-focused, nó sẽ không auto-focus lại, cho đến khi bạn refresh trang.