값이 변경된 필드를 확인하고 저장되지 않은 변경 사항을 사용자에게 알리는 방법

Question

로컬 상공 회의소를 위해 만든 대규모 맞춤형 백엔드 시스템에서 작업하고 필요한 작업 중 하나는 별도의 페이지에 게시하는 하위 양식 링크를 클릭하여 콘텐츠를 채우고 해당 시점까지 입력 한 변경 사항이나 정보를 잃게됩니다.

양식이 다소 크고 일반적으로 30 개 이상의 필드가 있습니다. 이전에는 단순히 Coldfusion을 사용하여 어떤 종류의 페이지 (New vs Edit)를 기반으로하는 URL에 간단한 변수를 전달하여 검사를 수행했지만 분명히 상황이 더 정교 해짐에 따라 이러한 기본 접근 방식은 만족스럽지 않았습니다.

동적이어야합니다.

기본적으로 사용자가 편집 페이지에서 변경 사항을 입력하고 비즈니스 주소 섹션에서 "새 주소 추가"를 클릭하면 변경 사항을 감지하고 (하드 파트) 링크를 비활성화합니다 쉬운 부분) 제출을 수행하여 주 양식을 저장할 때까지 새 주소를 추가하십시오 (동일한 페이지로 다시 순환).

필드의 onChange 속성을 사용하는 것은 작동하지 않습니다. 일부 기능은 이미 일부 기능에 대해이 기능을 사용하고 있기 때문입니다.

저는 많은 다른 스크립트를 사용하여 엉망으로 만들려고했습니다. 그 중 많은 부분이 $ (": input") 필터를 사용했습니다. 여기

이 바이올린 : http://jsfiddle.net/AFahj/50/

var propertyChangeUnbound = false; 
$("#testbox").on("propertychange", function(e) { 
    if (e.originalEvent.propertyName == "value") { 
     alert("Value changed!"); 
    } 
}); 

$("#testbox").on("input", function() { 
    if (!propertyChangeUnbound) { 
     $("#testbox").unbind("propertychange"); 
     propertyChangeUnbound = true; 
    } 
    alert("Value changed!"); 
}); 

이 바이올린 코드는 두 부분으로 나뉩니다. 더 현대적인 브라우저 (하위) 및 이전 IE9 크랩 (상위) 용.

기본적으로 기능적으로 내가 원하는 것은 있지만, 문제는 양식 자체의 범위입니다. 그들은 거대하다. 하나의 스크립트에서 모든 입력을 포기하고 변경 사항을 기반으로 작업을 수행 할 준비가 될만큼 유연한 무언가가 필요합니다.

그렇다면 어떤 입력이 편집되었는지 (많은 경우에도 편집 할 수 있음) 볼 수있는 단일 스크립트를 만들고 적절한 조치를 취하는 방법은 무엇입니까?

Answer 1

jQuery의 의사 선택기 :input은 여기에 친구입니다.

선택 상자, 텍스트 영역 및 기타 입력을 포함한 모든 양식 입력을 선택합니다.

과거에는 이와 같은 스 니펫을 사용했습니다.

// give 500 ms delay before detecting changes to allow 
    // allow programmatic changes to input values 
    setTimeout(function() { 
      $(":input").on('keydown change', function(e) { 
        // when the change happens attach your event to deal with it 
        $(window).on('beforeunload', function(e) { 
          return "It seems you have unsaved changes. If you continue they will be lost"; 
        }); 

        // then remove the change detection (since we know it has changed already 
        $(":input").off('keydown change'); 
      }); 

      // Allow the thing to happen in certain circumstances. 
      $("form").on('submit', function() { 
        $(window).off('beforeunload'); 
      }); 
    }, 500);