JS 26 – focus/blur trong JavaScript

0
343

Xin chào các bạn, trong bài học ngày hôm nay mình sẽ giới thiệu đến các bạn focus/blur trong JavaScript.

Một phần tử nhận một sự focus khi người dùng nhấp vào hoặc sử dụng phím Tab trên bàn phím. Ngoài ra còn có một thuộc tính HTML tự động đặt sự kiện focus vào phần tử theo mặc định khi trang được tải.

Việc focus có nghĩa là: “chuẩn bị nhận dữ liệu tại đây”, vì vậy đó là thời điểm chúng ta có thể chạy đoạn code để khởi tạo hoặc tải một thứ gì đó.

Thời điểm mất focus (“blur“) có thể còn quan trọng hơn. Đó là khi người dùng nhấp vào một nơi khác hoặc nhấn Tab để chuyển đến trường biểu mẫu tiếp theo…

Blur thường có nghĩa là: “dữ liệu đã được nhập”, vì vậy chúng ta có thể chạy các đoạn code để kiểm tra hoặc thậm chí để lưu nó vào máy chủ.

Có những đặc điểm quan trọng khi làm việc với các sự kiện này, bây giờ chúng ta sẽ đi vào chi tiết nhé.

Sự kiện focus/blur

Sự kiện focus được hiểu là phần tử đó được tập trung, còn blur được hiểu khi phần tử mất focus.

Bây giờ chúng ta sẽ sử dụng chúng để xác nhận một trường nhập liệu trong ví dụ dưới đây:

  • Trình xử lý blur kiểm tra xem trường có được nhập vào email không và nếu không nó sẽ hiển thị lỗi.
  • Trình xử lý focus ẩn thông báo lỗi (khi blur nó sẽ được kiểm tra lại):

kết quả:

Các phiên bản HTML mới cho phép thực hiện nhiều xác thực bằng cách sử dụng các thuộc tính đầu vào: required, pattern … JavaScript có thể được sử dụng khi chúng ta muốn chúng trở nên linh hoạt hơn. Ngoài ra, chúng tôi có thể tự động gửi giá trị đã thay đổi trên máy chủ nếu chính xác.

Phương thức focus/blur

Các phương thức elem.focus()elem.blur() được sử dụng để đặt / bỏ đặt focus trên phần tử.

Ví dụ: giả sử khách truy cập không thể truy cập nếu giá trị đầu vào không hợp lệ:

kết quả:

Nó hoạt động trong tất cả các trình duyệt ngoại trừ Firefox (lỗi).

Nếu chúng ta nhập một thông tin nào đó vào đầu vào và sau đó cố gắng sử dụng Tab hoặc nhấp chuột ra khỏi <input>, thì onblur sẽ quay lại focus.

Xin lưu ý rằng chúng ta không thể “tránh mấtfocus” bằng cách gọi event.preventDefault() trong onblur, vì onblur hoạt động sau khi phần tử bị mất focus.

Kết luận

Như vậy trong bài học ngày hôm nay chúng ta đã cùng nhau tìm hiểu về focus/blur trong JavaScript. Trong bài học tiếp theo mình sẽ giới thiệu đến các bạn sự kiện: change, input, cut, copy, paste trong JavaScript.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây