웹페이지에서 백스페이스를 누르면 뒤로가기 가 되는데 

에디터를 이용해 글을 작성하는 중 포커스가 이동 되어 백스페이스를 누르면 

저장되지 않고 뒤로가기가 되어 작성중인 글을 날리는 경우가 있어 해당 기능을 막아달라는 고객의 요청이 있었습니다. 


코드를 수정하면 적용이 까다롭기 때문에 웬만하면 플러그인이나 설정을 통해 하려고 하였으나 

바람직 하지 않은것 같아 검색을 해보니 대부분 javascript 코드로 막는것 같았습니다. 


jquery 예제는 많지만 prototype 예제가 없어 테스트를 통해 예제를 만들었습니다.


        //prevent backspace key
         if( event.keyCode == 8) {
             // with no field focused, the target will be HTMLBodyElement
            if( event.currentTarget == document) {
               // stop this event from propagating further which prevents                     
               // the browser from doing the 'back' action
               if(event.target.nodeName == "INPUT" ||
                  event.target.nodeName == "TEXTAREA")
               {
                   
               }
               else
               {
                    return false;
               }
            }
          }

event는 event를 받은 변수명.
event.target.nodeName 은 이벤트를 발생시킨 객체의 <input><textarea> 와 같은 element이름 으로 보임. 

이 스크립트를 모든 페이지에 추가해야 backspace를 제대로 막을 수 있습니다. 

끝. 


Posted by 마법수정화살
,

요 3개가 만나면 무슨일이 생길까.. 

safari / firefox 에서는 Form.serialize() 에서 값을 전혀 가져오지 못한다.


안될땐 검색.. 

prototype1.5 에서는 Form.serialize()가 안된다는 글이 보이고 1.5.1에서 fix 되었다고 하여 잽싸게 바꿔봤지만

안됨.. 


결정적으로 되는페이지가 있고 안되는 페이지가 있음을 확인하고 

prototype 코드에서 로그를 찍어가며 차분하게 원인을 좁혀 나가다가 확인하고 황당한 원인을 찾을수 있었다.


1. 되는거 

<td>

<form id="form1">

<table>

<tr>

<td><input ~~ /></td>

</tr>

....

2. 안되는거 

<td>

<table>

<form id="form1">

<tr>

<td><input ~~ /></td>

</tr>

....


결론 : <table> 태그밑에 바로 <form> 태그를 두지 마라. 그리고 그 form을 serialize 해봐라.. 안된다.

javascript framework도 다 java 기본 함수들을 쓸텐데. 다른 프레임웍에서도 충분히 발생 할 수 있는 문제이다. 


물논 퍼블리셔가 짜임새있게 해놓으면 저런건 구경할일도 없겠지만 우리는 살다보면 황당한 코드를 만나게 마련이다..



Posted by 마법수정화살
,

이 일로 ie 구버전을 더 싫어 하게 되었다


form을 submit 하거나 ajax를 통해 게시물을 등록 할수 있는 웹어플리케이션이 있다.

첨부파일까지 등록 하려고 한다. 


그래서 jquery의 form 플러그인중  ajaxsubmit 함수가 좋은 것 같아서 사용했다. 

multipart-form data가 잘 받아진다. 


문제는 ie7 ,8 ,9 의 callback을 보면 황당하다.. 

본문 내용이 오거나 페이지 전체가 result로 넘어온다...


첨부파일 용량 제한, 확장자 제한을 처리하고 callback에서 처리하려고 해도 답이 없다.

급한 건이어서 일단 꼼수로 callback을 체크하도록 수정은 했는데.. 기분이 찝찝하다.

다시 바꾸기엔 시간도 부족 테스트 제대로 하려면 밤을새도 안될듯 하다.. 


mulipart-form의 ajaxSubmit 할때 해당 브라우저의 이슈가 있다.

다른 사이트의 소스를 보니 popup을 사용한것 같고 에러리턴 등은 out에 스크립트를 넣어서 하는것 같다. 


만약 이러한 기능이 필요하고 아직 개발 단계라면 브라우저 이슈를 충분히 생각하고 작업 하시길~


꼼수는 

해당 브라우저의 경우 결과를 세션에 저장해 두고 다른페이지를 ajax로 한번 더 호출...하여 사용하는 것이다.

물론 테스트를 잘 해야한다. 세션 리셋하는것 까먹으면 안됨..


끗  



Posted by 마법수정화살
,


onSelectRow, onCellSelect, onSelectCell 에 등록 된함수에 

event 객체를 받도록 하고 event객체를 이용해 체크박스나 체크박스를 포함한 영역이 클릭되면 나머지를 수행하지않고 패스



    if(e.target.id || $(e.target).find("input.cbox").length > 0)

    {

        return;

    }



더 좋은 방법이 있을지도?

몰라서 찾아 봣는데 다른방법이 없어보임..

Posted by 마법수정화살
,

타임존으로 시간대를 구하고 싶은데 가지고 있는 정보는 locale 뿐이라 타임존은 알수 없다

그래서 찾아보다가 발견한 라이브러리.


자동으로 클라이언트(브라우저) 시간대를 구해주는 자바스크립트 라이브러리 

Automatic Timezone Detection Using JavaScript 

http://pellepim.bitbucket.org/jstz/

위 사이트에 가면 나의 로컬 시간대를 보여주는데, 내가 Asia/Tokyo 라니.. 첫인상이 안좋다. 그래서 안씀.


그냥 국가마다 수도 타임존으로 하드코딩 하는게 속편한것 같다. 

Posted by 마법수정화살
,

jquery 플러그인으로 jquery timer가 있다.

아래 메서드 들이 있다고 한다.


everyTime : 계속동작

oneTime : 1번 동작

stopTime : 동작 취소, label만 넣어도 되고 label, fn을 넣으면 특정 fn만 취소 된다.

 http://www.jquery-plugins.info/jquery-timers-00013992.htm

3개의 매개변수를 받는다.

$(document).everyTime(timerInterval, "CheckTimer", doCheckTimer);  

1. 시간 

2. label 

3. 이벤트(함수) 

1. 시간 단위가 10ms 이하로 작게 설정되면 작동하지않는다. 

귀찮아서 소스는 까보지 않았는데 (쓰면서 봤다.)

플러그인 안에서는 특별히 0보다 작거나, NaN, 숫자가 아니면 동작하지 않는다. 

하지만 10ms 등 아주 적은 시간을 주면 동작 하지 않는 경우가 있다. 

setInterval사용시 브라우저 호환성을 위해서는 최소 10ms 이상으로 설정 하라고 하였다.

everyTime이 잘동작하지 않는다면 시간을 너무 적게 준게 아닌지 확인해보자


브라우저별 minimum timer Interval을 테스트 한 내용.

http://www.adequatelygood.com/Minimum-Timer-Intervals-in-JavaScript.html

-> 대부분 브라우저는 10 -15ms 에 동작 한다고 한다. 15ms 이상을 사용하라고 하는것 같다. 


어짜피 자바스크립트는 단일스레드로 동작하고 (ajax같은 애들은 스레드를 생성한다.)

ui 이벤트나 타이머 들은 같이 동작 될때, 대기중인 타이머나 이벤트가 있으면 다른것은 대기하고 중첩요청이 와도 

전부 실행되지않고 1개로 대기 된다. 그래서  setInterval 이 정확한 실행시간을 보장하지 않는다. 

그러니 너무 짜게 주지 말자. 

Posted by 마법수정화살
,

다중 창과 프레임

JAVASCRIPT 2014. 1. 20. 19:48

아래와 같은 web application 이 있다. 

 

 탑메뉴

메뉴

 

  본문 (IFRAME)


메인 페이지에는 지속적으로 호출 되는 ajax call이 있다. 

왼쪽 메뉴를 클릭하면 본문의  iframe이 갱신된다.


어떤 본문 페이지를 디버깅 중이었는데, 메인페이지에서 호출되는 ajax로그는 찍히는데

해당  ajax 메서드에 찍은 콘솔 로그는 안찍히는 것이었다.

그래서 코뿔소 책을 보니 메인페이지의 window와 본문(iframe)의 window는 

메인의  window.frames[0] 이고 각 페이지에 선언된 전역 변수는 따로 있는것이다.

하지만 상호 간섭하는 코드는 없어서 문제는 없다.


window

 탑메뉴

메뉴

 

  본문 (IFRAME)

  window


책에서 발췌

window 객체가 클라이언트 측 자바스크립트 코드의 전역 객체로 사용되고 그 창은 자신이 포함하고 있는 자바스크립트 코드의 실행 컨텍스트로써 사용된다는 것을 알아 보았다. 이것은 프레임에서도 마찬가지다. 모든 프레인은 독립적인 자바스크립트 실행 컨텍스트 이다.  모든 window객체는 자신만의 고유한 전역 객체이기 때문에 각 창은 자신만의 이름 공간과 자신만의 전역 변수 집합을 정의한다. 따라서 다중 프레임과 창의 관점에서 바라보면 전역 변수들이 더이상 전역이 아닌것처럼 보이고 만다.  

window 객체들은 frames, parent, top 등의 프로퍼티를 사용하여 참조할 수 있다.


** 그럼 메인페이지의 콘솔 로그를 볼라면 어떻게 해야하나?

firefox-firebug 기준으로 설명. 

아랫쪽 명령어 입력 하는곳에 

cd(top) 을하면 가장 상위 프레임으로 이동

cd(top.frames[1]) 메인 프레임 아래 두번째 프레임 


* IE :  http://msdn.microsoft.com/en-us/library/ie/gg589530%28v=vs.85%29.aspx#UsingCDacrossFrames

*chrome : http://stackoverflow.com/questions/3275816/debugging-iframes-with-chrome-developer-tools

Posted by 마법수정화살
,