Cách tạo Confirm Navigation bằng jQuery

Confirm Navigation là một pop up xuất hiện mỗi khi người dùng nhấn vào link nào đó để chuyển hướng. Nó giúp người dùng xác nhận là có thật sự muốn chuyển hướng đến link không, hay chỉ là vô tình click vào. Chức năng này chúng ta có thể bắt gặp mỗi khi post bài trong WordPress và vô tình nhấn vào link nào đó khi chúng ta đang viết bài.

Nó trông giống như thế này ở trên trình duyệt Chrome.

Xem Demo | Download

HTML

Giả sử chúng ta có một thẻ input và một link như thế này trên trang web.

<input type="text" class="w100 mt10" id="content"/>
<a href="http://www.thuthuatweb.net">Navigation Link</a>

jQuery

Và bây giờ một khi người dùng đã nhập dữ liệu vào trong thẻ input thì khi click vào link, thì pop up sẽ xuất hiện để kiểm chứng xem người dùng có thật sự muốn chuyến trang không. Để làm được việc này, thì các bạn dùng đoạn jQuery sau :

// Flag to show/hide confirmation
var showConfirm = false;

// Enabling confirmation on textbox content change
$(document).ready(function(){
    $('#content').keyup(function(){
        showConfirm = true;
    });
});

// Window event to show Confirm Notification
window.onbeforeunload = confirmExit;
function confirmExit()
{
    if(showConfirm){
        return "You typed something in the textbox. Are you sure you want leave?";
    }
}

Mình xin giải thích ngắn gọn về đoạn code bên trên như sau :
– Đầu tiên, chúng ta khai báo một biến showConfirm và ấn định giá trị là false. Biến này chỉ có giá trị true khi sự kiện keyup xảy ra (tức là người dùng nhập dữ liệu vào input). Và khi người dùng cố gắng đóng trình duyệt hoặc click vào link để chuyển trang, thì sự kiện window.onbeforeunload sẽ được thực thi. Bên trong sự kiện này, chúng ta sẽ kiểm tra xem biến showConfirm có giá trị là true hay không. Nếu là true, thì chúng ta sẽ hiển thị pop up yêu cầu người dùng xác nhận.

Mình mong là qua bài viết này, các bạn sẽ có thể có thêm kinh nghiệm trong việc sử dụng jQuery nói chung cũng như sự kiện window.onbeforeunload nói riêng.

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster