브라우저 뒤로 버튼으로 되돌아 가면 양식의 모든 필드를 지 웁니다.

사용자가 브라우저 뒤로 버튼을 사용할 때 양식 내의 모든 필드를 지우는 방법이 필요합니다. 지금 브라우저는 마지막 값을 모두 기억하고 돌아갈 때 표시합니다.

이것이 필요한 이유에 대한 더 자세한 설명 은 특정 데이터 그룹 내에서 고유하게 만들기 위해 알고리즘을 사용하여 값이 자동 생성되는 비활성화 된 입력 필드가 있습니다. 양식을 제출하고 데이터가 데이터베이스에 입력되면 사용자는 동일한 값을 다시 사용하여 동일한 양식을 제출할 수 없습니다. 따라서 처음에는 입력 필드를 비활성화했습니다. 그러나 사용자가 브라우저 뒤로 버튼을 사용하는 경우 브라우저는 마지막 값을 기억하고 동일한 값이 입력 필드에 유지됩니다. 따라서 사용자는 동일한 값으로 양식을 다시 제출할 수 있습니다.

내가 이해하지 못하는 것은 브라우저 뒤로 버튼을 누를 때 정확히 일어나는 일입니다. 페이지 크기가 브라우저 캐시 제한 내에 있으면 서버에 연결하지 않고 캐시에서 전체 페이지를 검색 한 것 같습니다. 브라우저 뒤로 버튼을 눌렀을 때 브라우저 설정에 관계없이 페이지가 서버에서로드되었는지 어떻게 확인합니까?

최신 브라우저는 BFCache (back-forward cache)로 알려진 것을 구현합니다. 뒤로 / 앞으로 버튼을 누르면 실제 페이지가 다시로드되지 않고 스크립트가 다시 실행되지 않습니다.

사용자가 뒤로 / 앞으로 키를 눌렀을 때 무언가를해야하는 경우-BFCache pageshow및 pagehide이벤트를 수신 합니다.

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

Gecko 및 WebKit 구현에 대한 자세한 내용을 참조하십시오 .

JavaScript가없는 또 다른 방법 <form autocomplete="off">은 브라우저가 마지막 값으로 양식을 다시 채우지 못하도록하는 것입니다.

이 질문 도 참조

<input type="text"양식 내부의 단일 > 로만 테스트 했지만 현재 Chrome 및 Firefox에서는 잘 작동하지만 IE10에서는 작동하지 않습니다.

Chrome에서 BFCache (뒤로 / 앞으로 버튼 캐시)와 관련된 전체 양식을 지우는 방법을 찾는 동안이 게시물을 보았습니다.

Sim이 제공 한 것 외에도 사용 사례에서 세부 정보 를 Back Button의 Clear Form 과 결합해야 합니까? .

이 작업을 수행하는 가장 좋은 방법은 양식이 예상대로 작동하도록 허용하고 이벤트를 트리거하는 것입니다.

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

inputJavaScript에서 객체를 생성하기 위해 이벤트를 처리하지 않거나 그 문제에 대해 다른 작업을 수행하지 않으면 완료된 것입니다. 그러나 이벤트를 수신하는 경우 적어도 Chrome에서는 change이벤트를 직접 트리거해야합니다 (또는 사용자 지정 이벤트를 포함하여 처리하려는 이벤트).

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

즉 추가해야합니다 후reset 좋은 작업을 수행 할 수 있습니다.

이전 브라우저와 호환되어야하는 경우 "pageshow" 옵션이 작동하지 않을 수 있습니다. 다음 코드는 나를 위해 일했습니다.

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

이것이 나를 위해 일한 것입니다.

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

나는 처음 $(document).ready에 내 jquery 섹션 에서 이것을 가지고 있었는데 이것 역시 작동했습니다. 그러나 모든 브라우저가 $(document).ready뒤로 버튼을 눌렀을 때 실행되는 것은 아니라고 들었 으므로 제거했습니다. 이 접근 방식의 장단점을 모르지만 여러 브라우저와 여러 장치에서 테스트했으며이 솔루션에서 문제가 발견되지 않았습니다.

아래 링크가 도움이 될 수 있습니다 ..

브라우저의 뒤로 버튼은 빈 필드 복원 , 양식 지우기로 돌아 가기 버튼을?

도움이 되었기를 바랍니다. 행운을 빕니다