웹프로그램 연구(VII) Input.text요소의 힌트용 스크립트

입력포커스의 문제

여기에 입력 포커스를 가져가면 공백이 된다.

공백인 채로 다른 곳에 이동하면 다시 초기 글자가 나온다.
<INPUT value="여기로 이동하세요" type="text">

입력란(Input.text)에 입력하기 위한 힌트를 주기 위해 많은 경우 GUI에서는 라벨을 써서 표시하곤 했다. 그러나 라벨이 반드시 사용하기에 편한 것은 아니다. 입력란 속에 공백을 채우기 보다는 힌트를 처음부터 표시하는 방법이 최근 웹프로그램에서 자주 보는 방법이다.

이 페이지는 그 자바스크립트를 소개한다.

<script type="text/javascript">
function setFocus(Sender){
  if (Sender.value == Sender.defaultValue) {Sender.value = '';}
}

function setBlur(Sender){
  if (Sender.value == '') {Sender.value = Sender.defaultValue;}
}
</script>

html본문에서의 요소

<input value="입력하세요" onfocus="setFocus(this)" onblur="setBlur(this)" type="text">

관련된 내 블로그:

매스매티카 위젯(Mathematica, Wolfram Alpha)를 만드는 방법