사용자가 페이지를 떠날 때 저장되지 않은 양식 데이터가 손실되는 것을 방지하려면 어떻게 해야 합니까?

페이지 이탈 시 저장되지 않은 변경 사항 방지

사용자가 저장되지 않은 양식 데이터가 있는 페이지에서 다른 곳으로 이동할 때 확인 메시지를 표시하는 것이 중요합니다. 일을 잃지 않으려는 의도. 이를 구현하려면:

짧지만 제한적인 접근 방식:

window.addEventListener("beforeunload", function (e) {
  e.returnValue = "Warning: Unsaved changes. Are you sure you want to leave?";
});

그러나 이 접근 방식은 양식 데이터가 제출될 때에도 확인 메시지를 트리거하므로 해결 방법이 필요합니다.

Dirty를 통한 종합 솔루션 플래그:

관련 없는 페이지 잎에 확인 메시지가 표시되지 않도록 하려면 양식 데이터가 변경된 시기를 나타내는 "더티" 플래그를 사용하세요.

const isDirty = () => false;

window.addEventListener("beforeunload", function (e) {
  if (formSubmitting || !isDirty()) {
    return;
  }

  e.returnValue = "Warning: Unsaved changes. Are you sure you want to leave?";
});

isDirty를 구현하세요. 사용 방법:

• 이벤트 기반 접근 방식: 사용자 모니터링 상호 작용을 통해 변경 사항을 감지하지만 잘라내기 및 붙여넣기 시 트리거되지 않는 등의 제한 사항을 고려하세요.
• jQuery Dirty 플러그인: 양식 변경 사항을 감지하고 사용자 정의 메시지로 페이지 종료를 방지하는 편리한 라이브러리입니다.

경고: 제한된 브라우저 지원

사용자 정의에 유의하세요. Chrome 51 이상과 같은 일부 브라우저에서는 확인 메시지가 더 이상 지원되지 않습니다. 대안으로는 "떠나기" 및 "머물기" 버튼이 있는 일반 대화 상자를 표시하는 것이 있습니다.

위 내용은 사용자가 페이지를 떠날 때 저장되지 않은 양식 데이터가 손실되는 것을 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!