Form - placeholder, autofocus

forms.html

 

 

PLACEHOLDER

웹페이지에 접속해서 회원가입을 할때 볼 수 있는 그런 것인데요.

input 폼에 글이 써저 있다가 마우스를 찍어서 포커스를 넣으면 그 글자가 사라지는 모습을 볼 수 있습니다.

이름 입력란에 "한글로 입력하세요" 라는 글이 써있다가 마우스를 클릭하면 그 글자가 사라저서 이름을 입력할 수 있는.. 그런 것을 지금 해보려고 합니다. ^^

 

이것은 input 태그에 옵션으로 placeholder="보여질 글씨" 를 입력해주면 되는데요.

학인해보니 IE9 이상에서 지원되고 파이어폭스나 크롬에서도 지원이 안되네요.

그래서 placeholder가 지원이 안되는 브라우저에서도 이 기능을 사용하기 위해 자바스크립트를 이용했습니다.

 

위 소스그림에서 녹색으로 밑줄 처있는 것을 보면 onFocus... 이렇게 되있는데요.

이것은 포커스 즉, 마우스 커서가 input에 있을때 라는 의미입니다.

반대로 파란밑줄의 onBlur...는 input에 커서가 없을때를 의미하는 것입니다.

 

onFocus="if(this.value=='이메일을 형식에 맞게 입력하세요!'){

this.value=''; this.className='myColor2';

}"

위 소스는 포커스가 있을때 input에 입력된 값이 '이메일을 형식에 맞게 입력하세요!' 라는 값이면 '', 즉 공백으로 만들어라는 의미입니다.

 

onBlur="if(this.value==''){

this.value='이메일을 형식에 맞게 입력하세요!'; this.className='myColor1';

}"

위 소스는 포커스가 없을때 input에 입력된 값이 없으면 '이메일을 형식에 맞게 입력하세요!' 를 입력해줘라는 의미입니다.

 

그리고 색깔을 연하게 하기위해서 CSS로 myColor1 색깔을 적용한 것입니다.

 

위처럼 하면 처음 페이지를 접속하게 되면 input 에 '이메일을 형식에 맞게 입력하세요!' 라는 글이 써있고 마우스를 클릭하여 포커스를 넣으면 깨끗하게 지워지게 됩니다.

 

AUTOFOCUS

회원가입 같은 페이지에 접속해보면 미리 커서가 input에 들어가 있는 경우가 있습니다.

이것은 사용자가 직접 마우스를 움직여 커서를 넣지 않아도 미리 커서를 넣어줘서 입력하기 편하게 해주는 것인데요..

이것은 input 에 autofocus 만 써주면 실행됩니다.

그런데 IE6, IE7, IE8에서는 autofocus를 지원하지 않기 때문에  IE6, IE7, IE8 사용자들을 위해 자바스크립트로 강제적으로 포커스를 넣는 모습을 위 소스그림에서 보여주고 있습니다.