[Java/Javascript]캐리지리턴과 브라우져 비호환성

이번에 회사 업무를 하면서 간단하다고 생각했던 일에 큰 코를 다쳤던 일이 있었습니다.

바로 “캐리지리턴“과 “브라우져 비호환성” 문제였습니다.

================================================================

먼저, “캐리지리턴“은 mysql DB에 저장되어 있던 한글 varchar 데이터를 가져와서

컨트롤러의 ModelMap에 변수에 담아 자바스크립트단의 변수로 쓸 생각이었습니다.

그런데 문제는, 이 변수가 자꾸 define하는 과정에서 “Unexpected token ILLEGAL

에러를 뱉어냈습니다.

debugging을 해봐도 정상적인 데이타가 나와 한참을 삽질하던 도중…

데이타에 “캐리지 리턴“이 포함되어 있는 것을 어렵사리 확인하였습니다 ㅠㅠ

그래서 아래와 같이 서버단에서 “캐리지 리턴“을 replace 처리해서 삽질을 끝냈습니다.

  String data = data.replaceAll("\r","");

================================================================

두번째로, 서버단에서 받아온 ModelMap변수를 자바스크립트단에서 구분자로 나눠

textarea에 각 배열요소를 넣고 끝에 “엔터키”를 삽입하도록 했습니다.

<html>
<head>
<script language="javascript">
var a = [서버단 ModelMap 변수];
var arrList = a.split("|");

for(var i=0; i<arrList.length; i++) {
    if(navigator.appName == "Microsoft Internet Explorer") {  //IE
        $("#box").append(arrList[i]+"\r");
    }else{  //Crome, Mozilla, Etc..
        $("#box").append(arrList[i]+"\n");
    }
}
</script>
</head>
<body>
    <textarea id="box" name="issueHashTag" rows=20 cols=30></textarea>
</body>
</html>

위 소스에서 보이는 바와 같이, 브라우져 별로 “엔터키”를 삽입할 때도 “IE”는

캐리지리턴(“\r”)을 사용하고 그 외의 브라우져는 라인피드(“\n”)를 사용합니다.

만약, IE에서 라인피드(“\n”)를 사용했다면 현재 위치에서 아래로 한줄 내리는 기능은

동작하지만 커서위치가 한칸 띄어지는 현상을 발견할 수 있습니다.

그러므로 캐리지리턴(“\r”)을 사용해야 다음줄의 첫 위치로 커서를 옮길 수 있습니다.

================================================================

마지막으로,  위 소스에서 Textarea에 값을 넣어놓고 해당 값을 삭제하는 순간 크롬에서

아래와 같은 경고메세지가 나오더군요.

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

‘이건 또 모야…’ 하고 구글링을 해보니 jquery를 1.7로 업데이트 했더니 해당 문제를

고칠 수 있었다고 나와있어 그것도 시도해 보았지만 Textarea에 액션이 들어가는 순간,

저 메세지는 변함없이 발생하였습니다.

그리고 Textarea에 기존에 세팅되어 있던 값을 건드리지 않고 새로운 값을 넣었을 때

즉, 데이타를 append 할때는 들어갔지만 역시나  Textarea에 액션을 가하면 여지없이

위의 경고메세지가 출력되며 정상작동하지 않는 문제가 있었습니다.

파폭도 동일하게 정상작동하지 않는 문제가 발생했습니다

여기서 중요한건!!!!

“IE에선 이상없이 잘 동작한다는 것입니다! 오잉~~~ ㅋㅋ” 

================================================================

클라이언트 개발이 어렵다는 사실을 새삼 실감하고 공부가 많이 필요하겠구나 느낀

요 며칠이었습니다.

참고로, jquery 버전은 1.6.1과 1.7.1을 번갈아 사용했습니다.

혹시나 해결책을 알고 계신 분은 댓글 꼭 부탁드릴께요^^

*참고 url

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

w

%s에 연결하는 중