| Form Field 에서 Alert() | Go to formCheck |
| 폼필드에 입력한 문자, 문자열을 확인하고 그 내용이 잘못된 입력이면 사용자에게 어떤 말을 해줄 필요가 있는데,
이 때 쓸 수 있는 Event가 Focus, Blur입니다.
필드에서 두 이벤트를 Alert()나 Confirm()에 사용시 유의점과 대안입니다. |
|
<form name="fo">
<input name="txt1" type=text onFocus='alert("\nAlert Pop-up Window")'> </form> |
|
위의 코드는 txt1 필드에 focus가 오면 alert 창이 뜹니다. 문제는 페이지를 재 출력(load)하거나 페이지 크기를 변경했을 때 일어납니다.
이 경우 form이나 링크의 property는 변경되지 않는 document 이기 때문입니다. 그러므로 필드의 focus 여부도 보존 됩니다.
그래서, 이 경우 alert 창이 3번 뜹니다(NN3). 왜냐하면, 이 경우 가장 먼저 일어나는 event handler는 txt1 필드의 onBlur이고, 페이지를 다시 출력합니다. 그리고 txt1에 focus를 줍니다. Pop-up창이 뜨므로 focus를 Pop-up창이 가져갑니다. 그래서 txt1은 onBlur, Pop-up창을 닫으면 다시 txt1에 focus를 줍니다. 이렇게 반복해서 onBlur, onFocus가 일어 납니다. NN4에서는 계속해서 일어 납니다.(Ctrl-Alt-Del 키로 닫아야 합니다. Bug라고 할 수 있습니다.)(NN3의 3번 나오는 것과 왜 이런지는 모르겠습니다.) 그러므로, 필드에서 focus, blur 이벤트를 사용시 Alert나 confirm박스를 사용하지 말아야 합니다. 그러면 사용자가 잘못 입력 했을때, 어떻게 알릴 수 있냐구요..? 그 필드에 안내문을 직접 넣는 겁니다. 아래 처럼요.. |
| onFocus='this.value=" 잘못 입력 하였습니다. 다시 입력 하세요.."; this.select()' |
| this.select()는 위의 "잘못... 하세요"를 모두 선택상태로 만듭니다. 백스페이스 키를 누르면 다 없어지죠..
이 방법이 위의 문제를 해결할 수 있고, 사용자가 쉽게 필드의 내용을 수정할 수 있게 합니다. |
|
[덧말] Confirm(), Alert() 사용시 쓸 수 있는 줄간격은 한 줄당 한글은 34자까지 한 줄에 쓸 수 있습니다. 브라우저 문자셋 지정에 따라 다릅니다.
영어는 소문자나 숫자로 70문자이고 넘으면 다음줄로 줄넘김을 합니다. 물론, 소문자, 대문자 그리고, 문자셋 지정에 따라 달라 집니다.
편집은 \n와 공백을 사용하여 조정할 수 있습니다. NN과 IE에 따라 간격과 표시 방법이 조금 다릅니다. |