백스페이스 키를 막아보기

백스페이스 키를 누르면 뒤로가기가 된다는 건 다들 알고들 있을거고. 이번에 했던 작업은 콤보박스(태그는 select죠)에 포커스가 있을 경우 백스페이스를 누르면 뒤로가기가 되는 것을 막아달라는 요청이 있어서 해보았다.

간단하게 처리할 수 있겠다 하면서 진행했는데 의외로 몇 가지 복병이 있었다. 이 스크립트의 키 포인트는

1. 백스페이스(Backspace)키는 onkeydown() 이벤트 함수로 감지할 수 있다.
2. 현재 포커스 위치를 알아내는 방법은 document.activeElement 이다.
3. 포커스가 있는 태그 객체의 태그명을 알고 싶으면 someObject.tagName 을 사용한다.
4. 백스페이스의 keyCode 값은 8이다.
5. 특정한 속성값을 알고 싶으면 object.getAttribute("속성명")을 사용한다.

위 내용은 아주 간단하지만 실제로는 잘 사용하지 않는 것들이라 자료를 찾아봐야만 했다. 어쨌든 이런 내용들을 바탕으로 해서 아래의 요구사항에 대응하는 스크립트를 구성했다.

- 콤보박스(select)에 커서가 있을 경우 백스페이스로 뒤로가기가 허용되지 않는다.
- 텍스트 박스 중 readonly 에 커서가 있을 경우 백스페이스로 뒤로가기가 허용되지 않는다.

두 가지를 요구사항을 처리하기 위해 아래와 같이 스크립트를 구성했다.

// -----------------------------------------------------------
// Function : 
// Date : 2011.07.13 jyhyun
// Desc : 포커스가 select, text readonly 속성의 input에 있을 경우 백스페이스 불가
// -----------------------------------------------------------
document.onkeydown = function () {
    var backspace = 8;
    var t = document.activeElement;

    if (event.keyCode == backspace) {
        if (t.tagName == "SELECT")
            return false;

        if (t.tagName == "INPUT" && t.getAttribute("readonly") == true)
            return false;
    }
}

선제 지식에 비해 코드는 무지 짧다. 역시 해결 방법을 먼저 생각해 내고 관련 자료를 찾을 수 있는 능력을 가지는 것이 코딩의 기본인가 부다. 참. 크로스 부라우져는 테스트하지 않았으며 IE8버젼에서만 테스트 되었다. 혹시라도 다른 브라우져에서 사용하려면 테스트가 필요하다.