Cách dùng .blur() trong jQuery

Blur là sự kiện xảy ra khi con trỏ chuột đi ra ngoài đối tượng. Ví dụ bạn có một ô input, khi người dùng nhập dữ liệu xong và nhấn tab để di chuyển con trỏ sang ô input khác thì sẽ xảy ra sự kiện blur.

Chúng ta có 3 cách sử dụng như sau:

Cú pháp

.blur( handler )

Trong đó handler là hàm xử lý sự kiện.

.blur( [eventData ], handler )

Trong đó:

• handler: là hàm xử lý sự kiện.
•  eventData là một object sẽ được đưa vào hàm handler.

.blur()

Cách này không có tham số, nó dùng để kích hoạt sự kiện.

Lưu ý: Đọc bài xử lý sự kiện và kích hoạt sự kiện để hiểu rõ hai từ khóa trên.

Ví dụ

Mình sẽ làm một ví dụ rất phổ biến như sau: Khi nhập dữ liệu nếu người dùng không nhập mà di chuyển sang chỗ khác thì thông báo họ là bắt buộc nhập.

<script>
    $(document).ready(function () {
        $("#username").blur(function () {
            var value = $(this).val();
            if (value === ''){
                alert("Vui lòng nhập username");
            }
        });

        $("#password").blur(function () {
            var value = $(this).val();
            if (value === ''){
                alert("Vui lòng nhập password");
            }
        });
    });
</script>

<form>
    <input id="username" type="text" value="" placeholder="Username"> <br/><br/>
    <input id="password" type="password" value="" placeholder="Password"> <br/><br/>
    <input type="text" value="LOGIN">
</form>