저장되지 않은 데이터를 보호하면서 웹 양식 포기를 어떻게 방지할 수 있습니까?

데이터 손실 없이 양식 포기 방지

사용자가 저장되지 않은 양식 데이터가 있는 웹페이지에서 다른 곳으로 이동할 때 양식 데이터가 손실되어 실망스러울 수 있습니다. 진전. 데이터 무결성과 사용자 만족을 보장하려면 경고 메시지를 구현하는 것이 중요합니다.

BeforeUnload 이벤트 구현

첫 번째 접근 방식은 beforeunload 이벤트를 처리하고 null이 아닌 값을 반환하는 것입니다. 끈. 그러나 양식을 제출하면 이 이벤트가 트리거될 수도 있습니다. 이를 완화하려면 양식 제출을 표시하는 플래그(formSubmitting)를 설정하고 그에 따라 프롬프트를 억제하십시오.

window.onload = function () {
    window.addEventListener("beforeunload", function (e) {
        if (formSubmitting) {
            return;
        }

        var confirmationMessage = 'Unsaved changes will be lost.';
        (e || window.event).returnValue = confirmationMessage; // IE
        return confirmationMessage; // Others
    });
};

"더티" 플래그 사용

프롬프트를 방지하려면 변경 사항이 없으면 사용자는 "더러운"을 사용합니다. flag.

var isDirty = function () { return /* logic here */ };

window.onload = function () {
    window.addEventListener("beforeunload", function (e) {
        if (formSubmitting || !isDirty()) {
            return;
        }
        
        // Display prompt here
    });
};

대체 접근 방식

• jQuery 및 양식 직렬화: 이 방법은 비활성화된 요소와 이름이 지정되지 않은 요소를 건너뛰므로 제한이 있습니다. .
• 이벤트: 키 누르기 및 변경 이벤트가 JavaScript 또는 가상 입력을 통해 이루어진 변경 사항을 포함하여 항상 모든 변경 사항을 캡처하는 것은 아닙니다.

타사 솔루션

검증된 라이브러리 활용을 고려하세요. 단순화하다 구현:

• jQuery.dirty: 양식 변경 사항을 감지하고 저장되지 않은 데이터로 떠나는 것을 방지합니다.
• jQuery 계속하시겠습니까? (더 이상 사용되지 않음): 사용자 정의 메시지 및 기타 유용한 기능을 제공합니다.

브라우저 고려 사항

사용자 정의 메시지는 Firefox 및 크롬. 명확성을 위해 기본 브라우저 대화 상자를 사용하는 것이 좋습니다.

위 내용은 저장되지 않은 데이터를 보호하면서 웹 양식 포기를 어떻게 방지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!