검색창(입력창, input 태그) 안의 내용 사라지거나 나타나게 하는 방법. 이벤트(onfocus, onblur)

 

검색창 같은 입력창을 보면 아무것도 하지 않았을 때 기본 텍스트(글자, 숫자, 문장 등)가 입력창에 이미 입력되어 있고, 검색하려고 마우스로 검색창을 클릭하면 안에 있던 내용이 사라지는 것을 볼 수 있을 겁니다.

 

혹은 검색창을 클릭했다가 아무것도 입력하지 않고 다른 곳을 클릭하게 되면 사라졌던 텍스트가 나타나는 것을 볼 수 있을 겁니다.

 

이처럼 검색창(입력창)에 텍스트(문장, 글자, 숫자 등)가 나타나거나 사라지게 만드는 방법은 어떻게 하는 걸까요?

 

이런 기능은 어떤 개체가 활성화되었느냐 아니냐에 따라 그 상황에 맞는 이벤트가 발생하게 하면 되는데요.

 

여기서 사용하게 될 이벤트는 ' onfocus'와 ' onblur'입니다.

 

<input type="text" name="test" value="테스트" onfocus="if(this.value=='테스트'){this.value=''}" onblur="if(this.value==''){this.value='테스트'}">

 

위 input 태그를 실행시켜보면 입력창에 '테스트'라는 텍스트가 입력되어 있는 것을 볼 수 있을 겁니다.

 

그리고, 입력창을 클릭하면 '테스트'라는 텍스트가 사라지는 것을 볼 수 있을 겁니다.

 

또 다시 다른 곳을 클릭하면 사라졌던 텍스트가 나타나는 것을 볼 수 있을 겁니다.

 

이는 마우스로 입력창을 클릭하게 되면 입력창이 활성화되어 'onfocus' 이벤트가 발생하기 때문에 여기에 입력된 스크립트가 실행되게 되구요.

 

반대로 마우스를 다른 곳에 클릭하게 되면 입력창이 비활성화되어 'onblur' 이벤트가 발생해서 여기에 입력된 스크립트가 실행되게 됩니다.

 

onfocus="if(this.value=='테스트'){this.value=''}"

 

즉 onfocus가 실행되면 이것의 값이 '테스트'라면 공백('')으로 만들라는 거구요.

 

onblur="if(this.value==''){this.value='테스트'}"

 

반대로 onblur가 실행되면 이것의 값이 공백('')이면 '테스트'로 만들라는 겁니다.

 

이렇게 onfocus와 onblur로 상황에 따라 이벤트가 발생하게 함으로서 이런 신통방통한 재주를 부리게 만들 수 있네요. ^^

 

무슨 말인지 잘 모르겠다 하시는 분은 그냥 위 코드 그대로 가져 가서 '테스트' 부분을 다른 원하시는 값으로 변경하고 사용하시면 됩니다.