All code is guilty until proven innocent
Bamboo killer, JIRA stalker, Git folker, Maven follower
Textarea 한글 글자 수 카운팅 제대로하기
추측컨데 한글이 조합형이라 발생하는 문제 같습니다.
어떤 문제냐면 textarea 글자 수 카운팅을 할 때, keydown, keyup, change 등등의 이벤트 핸들러를 바인딩 해놔도 한글을 입력하면 카운트가 제대로 업데이트 되질 않습니다. 몇몇 jQuery 플러그인이나 JavaScript 구현된 것을 구글링 해봤는데 코드는 대동소이하더라구요. 문제도 여전히 발생하고. 사실 영어는 문제 발생하지 않으니 아마 고려하지 않았을겁니다.
이 문제를 해결한 곳이 두 군데 있는데 하나는 미투데이고 다른 하나는 트위터입니다. 미투 같은 경우엔 focus가 발생했을 때, setInterval() 함수를 이용해 업데이트를 시작하고 다시 blur()가 되면 setInterval()을 해지시키는 식으로 구현했습니다. 물론, 좀 비효율적이긴 하지만 이렇게 안하면 어떻게 구현하나 싶기도 하네요.
트위터는 어떤식으로 구현하는지 아직 살펴보지 못했는데 한 번 확인해 봐야겠네요.
[링크] 프리마커 문법 개요
http://radworks.egloos.com/2483169
사실 null 체크하는 부분 때문에 구글링하다가 찾은 링크인데, 회사에서 쓰는 프리마커 버전(2.3.8)에선 이 글에 소개된 ?exists를 사용하면 에러가 발생하네요. 결국, 파트장님이 알려주신 <#if object??> ... </#if> 문법을 사용해서 null 체크를 했습니다.
jQuery의 event.stopPropagation()
회사 코딩하던 중에 다음과 같은 문제에 봉착했습니다:
제공받은 마크업 셀렉트 박스가 있는데 마치 콤보박스같이 클릭하면 아래로 몇 개의 리스트가 나타납니다. 따라서 제목을 클릭했을 때 리스트가 나타나고 사라져야하며, 또한 셀렉트 박스 외의 다른 지점을 클릭했을 경우 리스트가 사라져야 합니다.
처음엔 focusout()을 사용해보려고 했는데 제목을 누른 후 나타난 리스트를 클릭할 경우 focusout 이벤트가 발생해 리스트를 클릭할 수가 없습니다. 그래서 body에 click() 이벤트를 걸어서 해당 리스트를 hide() 하려고 했더니 모든 클릭 이벤트를 먹어서 제목을 클릭했을 때 리스트가 나타나질 않습니다.
팀원 분에게 물어보니.. 팀장님이 그럴 때 stopPropagation()을 사용하라고 하시더라구요. 사실 그동안 많이 봤던 함수인데 무슨 기능 하는지 모르고 있었습니다. 무슨 기능인고 하니, 이벤트가 발생하면 버블링(트리를 타고 올라가서)해서 루트까지 올라가게 되는데 이를 막아주는 기능이라고 합니다. 즉, 셀렉트 박스의 제목에 걸어두면 body의 click() 이벤트 핸들러로 가는걸 막아주며, 따라서 원래 제목에 걸어둔 이벤트 핸들러가 동작하게 됩니다.
그래서 다음과 같이 stopPropagation()을 먼저 해줘야 합니다.
$(“#listBoxTitle”).click(function(e) {
e.stopPropagation();
// 하고 싶은 것
});
같은 맥락의 delegate() 라는 함수가 있는데, 이 함수로 특정 엘리먼트에 이벤트 핸들러를 등록해두면 DOM 트리 상 하위에 있는 엘리먼트가 버블링 시키는 이벤트를 document까지 안올리고 여기서 처리하게 됩니다.
그나저나 jQuery 1.7 에선 live, delegate 함수 모두 on() 으로 통합되었다는 군요.
최근 댓글