[javascript] placeholder 구현

placeholder는 아직까지 IE에서는 제대로 지원하지 않고 있다.
크롬이나 사파리에서 편하게 쓰려면 아래처럼 하면 된다.

<input type="text" name="fname" placeholder="First name">

1. placeholder 규칙 

뻔하긴 하지만, Form에서 placeholder의 나름 기본 규칙을 정리해봤다.

a. 현재창에서 새로고침이 진행될 경우 해당 필드에 placeholder 표시
b-1. 해당필드에 입력값이 있을 경우 입력값 유지
b-2. 해당필드에 입력값이 없을 경우 다시 placeholder 재표시
c. form submit 전에 해당 필드의 값이 placeholder와 동일 할 경우, 해당 필드 'null' 취급


2. onfocus, onblur

<input type="text" name="fname" onfocus="checkPlaceholder();" onblur="checkPlaceholder();">

placleholder가 신경써야 할 부분은 두가지다.
커서가 들어가는 시점하고(onfocus), 커서가 빠져나오는 시점(onblur)

onchange를 사용해도 될것 같지만 사소한 차이가 있다.
onchange는 값이 변경되었다는것을 감지해야 동작이 진행된다.
해당 필드에 포커스를 가져가거나 빠져나오는 순간이 아닌
필드에 적혀있는 텍스트와 포커싱 이후에 값이 다를때만 적용이 되므로
자연스럽지 못한 부분이 있다.


3. 문자열 비교 - 개행문자(\n)

placeholder를 두줄 이상에 걸쳐서 작성해야 될 경우도 있다. 이럴때 보통 '\n'을 사용하는데 OS에 따라서 '\r\n'을 사용하는 경우도 있다고 한다.
암튼 이렇게 특수문자가 들어가면 문자열 비교를 정상적으로 진행할 수 없다.
replace를 사용해서 치환하는 작업이 필요하다.

var str_ph = "유의사항 \n 1.ㄱㄱㄱ \n 2.ㄴㄴㄴ";
var tmp_ph = str_ph.replace(/\n/g,"").trim();

\자가 들어가기때문에 escape을 위해 '/' 으로 시작하고
/g는 옵션이다.

g global match (전역)

i ignore case (대소문자무시)

m match over multiple lines (두줄이상)

y Non-standard sticky (^_^)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace


4. placeholder.js

조금더 편하게 하고 싶으면 관련 자바스크립트 라이브러리가 있다.
브라우저 상관없이 전부 적용되는듯.
https://github.com/NV/placeholder.js/