웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
열심히 글을 써내려가다가 실수로 페이지를 이동하는 경우가 없으신가요? 예를들어 뒤로가기 버튼이 마우스에 있는 경우도 있죠~ 이 경우 자신도 모르게 뒤로 이동해 열심히 작성한 내용이 사라질 수 있습니다. 물론 자동 저장 기능이 없다면 말이죠~
자동 저장가능은 분명 효과적이고 우수한 안정장치입니다. 하지만 시간 간격으로 이루어지고 쿠키를 허용하거나 저장 공간에 제약이 있을 수 있죠. 서버에 저장한다고해도 트레픽이 높은 경우 불필요한 자원낭비이므로 이 방법을 고집하는 건 비효율적이죠~
그럼 뒤로이동을 금지하는 방법을 구현해 실제 콘텐츠 작성시 발생가능한 위험 요소로 부터 좀 더 자유로워지면 좋겠죠? 그럼 어떻게 이 기능을 적용하는지 알아보겠습니다.
# 백스페이스에 이벤트를 사용하여 예방
가장 많이 사용하는 방법이 keyup 또는 keydown 이벤트를 사용하는 방법입니다. 간단하게 눌려진 키가 백스페이스인지 확인하여 이동을 금지합니다. 이에 더하여 활성화 된 엘리먼트가 현재 쓰기와 관련된 경우에만 금지하는 방법이 있습니다. 이 경우 기존의 백스페이스 기능을 그대로 활용할 수 있죠~
아래는 대부분의 경우 사용 가능한 코드로 순구 자바스크립트입니다.
여기서 keydown과 세번째 인자로 true를 사용하여 이벤트 캡쳐가 더 빠를 수 있습니다.
자동 저장가능은 분명 효과적이고 우수한 안정장치입니다. 하지만 시간 간격으로 이루어지고 쿠키를 허용하거나 저장 공간에 제약이 있을 수 있죠. 서버에 저장한다고해도 트레픽이 높은 경우 불필요한 자원낭비이므로 이 방법을 고집하는 건 비효율적이죠~
그럼 뒤로이동을 금지하는 방법을 구현해 실제 콘텐츠 작성시 발생가능한 위험 요소로 부터 좀 더 자유로워지면 좋겠죠? 그럼 어떻게 이 기능을 적용하는지 알아보겠습니다.
# 백스페이스에 이벤트를 사용하여 예방
가장 많이 사용하는 방법이 keyup 또는 keydown 이벤트를 사용하는 방법입니다. 간단하게 눌려진 키가 백스페이스인지 확인하여 이동을 금지합니다. 이에 더하여 활성화 된 엘리먼트가 현재 쓰기와 관련된 경우에만 금지하는 방법이 있습니다. 이 경우 기존의 백스페이스 기능을 그대로 활용할 수 있죠~
아래는 대부분의 경우 사용 가능한 코드로 순구 자바스크립트입니다.
<script type="text/javascript">
window.addEventListener('keydown',function(e){
if(e.keyIdentifier=='U+0008'|| e.keyIdentifier=='Backspace'||e.keyCode==8) {
if(e.target==document.body){
e.preventDefault();
return false;
}
}
},true);
</script>여기서 keydown과 세번째 인자로 true를 사용하여 이벤트 캡쳐가 더 빠를 수 있습니다.
코드 스니펫 widget
아래의 글도 찾고 계시지 않나요?