닉스로그

예전에 만들었던 AJAX 채팅방 업그레이드판 입니다.

jsp 기반으로 되어있으며 DB 는 필요없습니다.

테스트 주소 : http://cranix.net/CranixChatForAJAX

아래 소스는 이클립스 프로젝트를 그대로 export 한것입니다.

CranixChatForAJAX.zip

크로스 브라우저 웹기반 위지윅 에디터를 만들려고 몇일간 삽질중이었다.

그러던중 IE 에서 자꾸 focus 가 달아나 버리는 이상한 현상이 발생했다.

색상선택기를 열심히 만들어서 클릭을 하면 에디터의 포커스가 없어져 버려서 색상이 바뀌지 않게 되는것이었다.

그런데 이상한건 다른 버튼들과 다른점이 없는데 그 버튼들은 되고 색상선택기만 안된다는것.!

연구에 연구를 거듭한 결과...(아니 삽질에 삽질..;;)

황당한 결과를 얻었다.

색상선택기는 테이블에다가 onclick 이벤트를 걸어서 구현한거고 나머지 버튼들은 이미지에다가 onclick 이벤트를 걸어서 작성했다.

결국 table 태그에 onclick 이벤트를 걸어서 클릭한건 포커스가 없어지고 image 태그에 onclick 이벤트를 걸어서 클릭한건 포커스가 그대로 남아있는것이었다.

이런 황당한 시츄에이션으로 색상선택기의 테이블에 걸려있는 onclick 이벤트를 싹빼주고 대신 투명 이미지를 덮어서 거기에 onclick 이벤트를 걸어줬더니 이상없이 잘 돌아간다.

버그.. 겠지?

IE 와 FF(firefox) 의 차이점

1. hand 는 웹표준이 아니여서 익스에서만 된다. 다음부턴 pointer 를 쓰자.

cursor:hand(x) --> cursor:pointer(0)

2. FF에서의 javascript 는 function 밖에서 변수 초기화가 되지 않는다.
예를들어 아래 소스를 보자.

var timeInterval = 5000;
 
function startInterval() {
    setTimeout("test()",timeInterval);
}
function test() {
    alert("hello!");
}
startInterval();

IE 에선 5초있다가 test() 를 실행하게되지만 FF 에선 바로 test() 가 실행된다.
이유는 timeInterval 이 초기화 되지 않기 때문이다.
유의하자.


3. FF 에선 selectSingleNode 와 같은 XPATH 탐색 함수가 지원되지 않는다.
예를들어 IE 의 아래와같은 구문은

var obj = xmlObj.selectSingleNode("root/subnode");

FF에선안되고 아래와 같이 바꿔야 IE,FF 모두 쓸수있다.

var obj = xmlObj.getElementsByTagName("root")[0].getElementsByTagName("subnode")[0];

XPATH 가 웹표준이 아니었나? 상당히 편했는데 하루빨리 지원됬으면 좋겠다.


4. IE 에서 노드 탐색시 .text 로 텍스트를 불러올수있는데 FF 에선 불가능하다.
아래 소스는 IE 에서는 가능하나 FF 에선 불가능하다.

var text = xmlObj.getElementsByTagName("root")[0].text

모두 가능하게 하려면 아래 소스를 쓰자

var text = xmlObj.getElementsByTagName("root")[0].firstChild.nodeValue;

5. 위지윅 에디터 모드 변경법
IE 에서는 어떤 오브젝트든 contentEditable="true" 라는 플랙만 주면 에디터 모드가 된다. 예를들면 아래와 같다

<div id="editor" contentEditable="true"></div>

FF 에서는 아래와같이 javascript 로 designMode 를 On 시켜줘야 한다.

editor.contentDocument.designMode="On";

FF 에서는 document 객체에서 designMode 를 켜줘야 하기때문에 iframe 으로 써야한다.

[font-style]

[font-weight]

[font-size]

[font-variant]

[text-align]

[text-indent]

[text-decoration]

[text-transform]

[letter-spacing]

[word-spacing]

[color]

[background-color]

[background-image]

[background-repeat]

[background-position]

[background-attachment]

[background]

[padding]

[margin]

[border-style]

[border-width]

[border]

[float]

[visibility]

[list-style-type]

[list-style-image]

[list-style-position]

[list-style]

[cursor]