Tạo trang để yêu cầu trình duyệt không lưu trữ / bảo toàn giá trị đầu vào

Hầu hết các trình duyệt bộ đệm mẫu giá trị đầu vào. Vì vậy, khi người dùng làm mới một trang, các đầu vào có cùng giá trị.

Đây là vấn đề của tôi. Khi người dùng nhấp vào Lưu , máy chủ sẽ xác thực dữ liệu đã đăng (ví dụ: sản phẩm đã kiểm tra) và nếu không hợp lệ, sẽ gửi lại cho trình duyệt. Tuy nhiên, như đã nêu ở trên, ngay cả khi máy chủ xóa lựa chọn cho một số giá trị, chúng vẫn có thể được chọn do bộ đệm của trình duyệt!

Dữ liệu của tôi có các hộp kiểm vô hình (cho đến khi mục cha mẹ được chọn), do đó người dùng thậm chí không biết rằng một số giá trị trước đó vẫn được chọn, cho đến khi nhấp vào Lưu lại và nhận được thông báo lỗi - mặc dù người dùng nghĩ rằng nó không phải. Mà là khó chịu.

Điều này có thể được giải quyết bằng cách làm Ctrl+ F5, nhưng nó thậm chí không phải là một giải pháp. Có cách nào tự động / lập trình để báo cho trình duyệt không lưu bộ đệm dữ liệu đầu vào trên một số biểu mẫu / trang không?

Bạn rõ ràng đặt các giá trị là trống? Ví dụ:

<input type="text" name="textfield" value="">

Điều đó sẽ dừng các trình duyệt đưa dữ liệu vào nơi không nên. Ngoài ra, bạn có thể thêm autocompletethuộc tính vào thẻ biểu mẫu:

<form autocomplete="off" ...></form>

Từ một tham chiếu Stack Overflow

Nó không hoạt động với value = "" nếu trình duyệt đã lưu giá trị, do đó bạn nên thêm.

Đối với thẻ đầu vào có thuộc tính tự động hoàn thành, bạn có thể đặt:

<input type="text" autocomplete="off" />

Bạn cũng có thể sử dụng tự động hoàn thành cho một biểu mẫu.

Một cách tiếp cận khác là đặt lại biểu mẫu bằng JavaScript ngay sau biểu mẫu trong HTML:

<form id="myForm">
  <input type="text" value="" name="myTextInput" />
</form>

<script type="text/javascript">
  document.getElementById("myForm").reset();
</script>

Về cơ bản, có hai cách để xóa bộ đệm:

<form autocomplete="off"></form>

hoặc là

$('#Textfiledid').attr('autocomplete', 'off');

Điều này làm việc cho tôi trong các trình duyệt mới hơn:

autocomplete="new-password"