Xóa tất cả các trường trong biểu mẫu khi quay lại bằng nút quay lại của trình duyệt

Tôi cần một cách để xóa tất cả các trường trong biểu mẫu khi người dùng sử dụng nút quay lại của trình duyệt. Ngay bây giờ, trình duyệt ghi nhớ tất cả các giá trị cuối cùng và hiển thị chúng khi bạn quay lại.

Làm rõ hơn về lý do tại sao tôi cần điều này, tôi đã vô hiệu hóa trường đầu vào có giá trị được tạo tự động bằng cách sử dụng một thuật toán để làm cho nó trở thành duy nhất trong một nhóm dữ liệu nhất định. Khi tôi đã gửi biểu mẫu và dữ liệu được nhập vào cơ sở dữ liệu, người dùng sẽ không thể sử dụng lại cùng một giá trị để gửi cùng một biểu mẫu. Do đó, tôi đã tắt trường nhập ngay từ đầu. Nhưng nếu người dùng sử dụng nút quay lại của trình duyệt, trình duyệt sẽ ghi nhớ giá trị cuối cùng và giá trị tương tự được giữ lại trong trường nhập. Do đó, người dùng có thể gửi lại biểu mẫu với cùng giá trị.

Điều tôi không hiểu chính xác là điều gì sẽ xảy ra khi bạn nhấn nút quay lại của trình duyệt. Có vẻ như toàn bộ trang được truy xuất từ ​​bộ nhớ cache mà không bao giờ liên hệ với máy chủ nếu kích thước trang nằm trong giới hạn bộ nhớ cache của trình duyệt. Làm cách nào để đảm bảo rằng trang được tải từ máy chủ bất kể cài đặt trình duyệt khi bạn nhấn nút quay lại trình duyệt?

Các trình duyệt hiện đại thực hiện một cái gì đó được gọi là bộ đệm chuyển tiếp ngược (BFCache). Khi bạn nhấn nút quay lại / chuyển tiếp, trang thực tế sẽ không được tải lại (và các tập lệnh không bao giờ được chạy lại).

Nếu bạn phải làm gì đó trong trường hợp người dùng nhấn phím quay lại / chuyển tiếp - hãy lắng nghe BFCache pageshowvà pagehidecác sự kiện:

window.addEventListener("pageshow", () => {
  // update hidden input field
});

Xem thêm chi tiết để triển khai Gecko và WebKit .

Một cách khác mà không có JavaScript là sử dụng <form autocomplete="off">để ngăn trình duyệt điền lại biểu mẫu với các giá trị cuối cùng.

Xem thêm câu hỏi này

Đã thử nghiệm điều này chỉ với một <input type="text"> bên trong biểu mẫu, nhưng hoạt động tốt trong Chrome và Firefox hiện tại, tiếc là không có trong IE10.

Tôi đã xem qua bài đăng này khi đang tìm cách xóa toàn bộ biểu mẫu liên quan đến BFCache (bộ đệm ẩn nút quay lại / chuyển tiếp) trong Chrome.

Ngoài những gì Sim được cung cấp, trường hợp sử dụng của tôi yêu cầu các chi tiết cần thiết để được kết hợp với Clear Form on Back Button? .

Tôi thấy rằng cách tốt nhất để làm điều này là cho phép biểu mẫu hoạt động như mong đợi và kích hoạt một sự kiện:

$(window).bind("pageshow", function() {
    var form = $('form'); 
    // let the browser natively reset defaults
    form[0].reset();
});

Nếu bạn không xử lý các inputsự kiện để tạo một đối tượng trong JavaScript hoặc một cái gì đó khác cho vấn đề đó, thì bạn đã hoàn tất. Tuy nhiên, nếu bạn đang nghe các sự kiện, thì ít nhất trong Chrome, bạn cần tự kích hoạt changesự kiện (hoặc bất kỳ sự kiện nào bạn muốn xử lý, bao gồm cả sự kiện tùy chỉnh):

form.find(':input').not(':button,:submit,:reset,:hidden').trigger('change');

Đó phải được bổ sung sau khi các resetđể làm bất kỳ tốt.

Nếu bạn cần tương thích với các trình duyệt cũ hơn, tùy chọn "pageshow" có thể không hoạt động. Mã sau làm việc cho tôi.

$(window).load(function() {
    $('form').get(0).reset(); //clear form data on page load
});

Đây là những gì làm việc cho tôi.

$(window).bind("pageshow", function() {
    $("#id").val('');
    $("#another_id").val('');
});

Ban đầu tôi có điều này trong $(document).readyphần jquery của mình, nó cũng hoạt động. Tuy nhiên, tôi nghe nói rằng không phải tất cả các trình duyệt đều kích hoạt $(document).readykhi nhấn nút quay lại, vì vậy tôi đã gỡ bỏ nó. Tôi không biết ưu và nhược điểm của phương pháp này, nhưng tôi đã thử nghiệm trên nhiều trình duyệt và trên nhiều thiết bị và không tìm thấy vấn đề nào với giải pháp này.

Các liên kết dưới đây có thể giúp bạn ..

Nút quay lại trình duyệt khôi phục các trường trống , Xóa biểu mẫu trên Nút Quay lại?

Hy vọng điều này sẽ giúp ... Best Luck