[html] IE에서 readonly 속성에 커서 생기는 문제 및 백스페이스 막기

 

 

문제 발생

 

크롬과 IE 두개의 브라우저에 서비스를 해야하는 프로젝트에서 readonly관련 이슈가 생겨났다

개발할때는 크롬이 편리해서 크롬 화면만 보고 개발을 했더니

오픈이 다가와서 IE화면에서 테스트를 해보니

readonly 속성을 준 input 태그에서는 커서가 생겨나는 문제가 발생 했다. 

(readonly에서는 포커스 커서가 없는게 정상이다.)

 

 

 

더 큰 문제는

 

커서가 생긴 readonly 태그에 사용자가 실수라도 백스페이스를 눌렀을경우

혹은 그냥 화면을 클릭하고(어느 태그에서도 커서가 없는 blur상태) 백스페이스를 눌렀을 경우

뒤로 가기 이벤트가 발생되서 

기존에 입력했던 정보들이 다 없어져 다시 일일이 입력해야하는 불상사가 생겨났다.

 

입력해야하는 정보가 정말 적다면 무야무야 넘어갈순 있겠지만? ㅎㅎ;;;

제품등록같은 프로세스상 핵심이 되고 입력해야하는 정보가 많을 경우는

사용자 입장에서 부아가 치밀어 오를 수도 있다는것을 테스트하면서 느꼈다.

 

 

---

 

 

문제 해결

 

 

우선은 걸리적 거리는 커서를 없애봐야겠다라고  

생각을 하고 없애봤지만 (onfocus="this.blur()"를 사용했다.)

input에 커서가 없어지니 readonly에 있는 내용들을 

드래그조차 할 수 없었다.

사용자가 readonly에 있는 내용들을 복붙하기위해 드래그는 필요한 기능이라고 생각해 커서는 없애지 않았다

 

 

이제는 백스페이스다

(코딩해놓은지 좀 오래되서 인터넷에서 비슷한 걸로 가져왔다)

<script>
$(function() {
    $(document).keydown(function(e) {
        if(e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA"){
            if(e.keyCode == 8){
                return false;
           }
        }
 
        if(e.target.readOnly){ // readonly일 경우 true
            if(e.keyCode == 8){
                return false;
           }
        }
    });
});
</script>

 

위 내용을 해석해 보자면 

브라우저에서 keydown 이벤트가 일어나면

이벤트가 일어난 태그가 input이나 textarea가 아닐 경우 또는 태그가 readonly 속성을 가질 경우는

백스페이스 이벤트를 막는다는 로직이다.

 

 

더 쉽게 사용하려면 function이름을 지어주고

commonfunction.js 파일을 만들어 function을 넣어놓고 사용하고 싶은 화면에 

$(function(){}); 상단에 function이름만 넣어주면 된다.

 

 

 

$(function(){});은

$(document).ready(function(){});와 동일한 의미

정확히는 DOM(Document Object Model)객체가 생성되어 준비되는 시점에서 호출된다는 의미입니다.

JS와 비교하자면 document.onload()이랑 비슷하다고 생각하면 되고, html 문서가 로딩되면 이라는 느낌으로

이해하시면 됩니다.

 

 

 

PS. IE는 정말 구리다