백스페이스(BS) 눌렀을 때 메시지 뿌리고 화면 제어 (뒤로가기)

<script>

  $(document).ready(function(){

    // 키보드 백스페이스나 브라우저 상단 툴바의 백버튼, 브라우저 마우스 오른쪽 버튼 클릭시 단축메뉴의 뒤로 명령 

    window.onbeforeunload = function(){

      doExit();

    };

    // 화면 닫을 때.. 동작할 때도 있고 아닐 때도 있음.. ㅠ. document.ready 문장 밖에 두어야 하낭..?

    window.unload = function(){

      doExit();

    };

  });

  function doExit(){

    event.returnValue = '"[임시저장] 하여 주세요."';

  }

</script>

event.returnValue 에 false 를 입력하면 화면에 'false' 찍혀서 메시지를 넣는 방식으로 조치.

jquery 의 unload() 를 사용할 수도 있음..

2014.12.24(수) 이전 내용..

---------------------------------------------------------------------------------

백스페이스를 누르면 이전 화면으로 되돌아가는 것이야 알려진 바고..

백스페이스를 눌렀을 때 지금 입력 중이었다면,

사용자에게 물어 보고 화면을 전환하거나 현재 화면 그대로 있거나 하는 내용을 어떻게 반영할 것이냐..

body 태그에 keydown 이벤트 걸면 되는데,

input 에서 텍스트 수정하기 위해 백스페이스 누르는 상황에서도 화면전환 관련 로직이 돌면 안 되는 거.. ㅠ.

그래서..

<script>

  $(document).ready(function(){

    $('body').bind('keydown',function(e){

      if(e.keyCode==8 &&                                             // 이벤트의 keyCode 가 8 인 것이 백스페이스

        'INPUT;'.indexOf(e.target.nodeName)==-1 &&        // IE 에선 대문자던데, 아니면 toUpperCase() 처리

        !confirm('작성 중인 내용이 없으신가요..? '))          // 사용자 확인

       event.returnValue = false;                                    // 여기선 e.returnValue 가 아니라 event 임.. false 로 세팅해야 화면 멈춤

    });

  });

</script>

상기와 같이 하면 작동은 제대로 되는데, 브라우저 여백에서 마우스 오른쪽 버튼 눌러 나오는 메뉴에서 '뒤로 가기' 메뉴를 누르면,

keydown 이벤트가 안 먹는다는거.. ㅠ.

그렇다고 $(window).bind('unload',function(e){ ...}); 나 'beforeunload' 를 사용해도 안 되고..

이건 고민해 볼 만한 내용..