Cách tự động lấy nét trường nhập biểu mẫu đầu tiên với Vanilla JavaScript

Tìm hiểu cách tự động lấy tiêu điểm trường nhập đầu tiên khi tải trang trong các biểu mẫu HTML

Một trong những tiền đề cơ bản của Thiết kế UX tốt là tiết kiệm càng nhiều bước để đi từ a đến b càng tốt để người dùng của chúng tôi có thể nhận được những gì họ muốn nhanh chóng.

Không ai thích điền vào các biểu mẫu, đặc biệt là các biểu mẫu không dài, vì vậy hãy tiết kiệm cho người dùng của bạn một chút thời gian bằng cách tự động lấy tiêu điểm trường nhập đầu tiên trong biểu mẫu HTML của bạn khi tải trang.

HTML biểu mẫu

Thêm mã biểu mẫu này vào tài liệu HTML của bạn:

<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 tệp .js của bạn:

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

Trường nhập tự động lấy tiêu điểm trên bản demo tải trang

Hãy xem bản demo bên dưới:

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

Cách hoạt động của mã

Hãy xem biểu mẫu HTML. ID trong trường nhập đầu tiên trong biểu mẫu HTML được gọi là firstField - đây là những gì chúng tôi nhắm mục tiêu với JavaScript.

Trong JavaScript, chúng tôi thiết lập một sự kiện onload có tên là window.onload ngay lập tức chạy khi bạn truy cập một trang mới hoặc làm mới trình duyệt của mình.

Sự kiện onload thực thi một hàm tìm trường đầu vào với firstField ID qua document.getElementById và sau đó sử dụng JavaScript focus() phương pháp đặt trạng thái của trường đầu vào để lấy tiêu điểm.

Khắc phục sự cố

Đường nét tiêu điểm có đột ngột biến mất khỏi trường đầu vào của bạn không? Đó là bởi vì mã chúng tôi đã viết chỉ tự động lấy tiêu điểm trường nhập đầu tiên một lần trên mỗi lần tải trang. Nếu bạn thực hiện bất kỳ điều gì ngoài việc nhập ngay vào trường nhập tiêu điểm tự động, thì trường đó sẽ không tự động lấy tiêu điểm lại cho đến khi bạn làm mới trang khác.