웹프로그램 연구(VII) Input.text요소의 힌트용 스크립트
[목차(도우미)]
입력포커스의 문제
여기에 입력 포커스를 가져가면 공백이 된다.
공백인 채로 다른 곳에 이동하면 다시 초기 글자가 나온다.
<INPUT value="여기로 이동하세요" type="text">
입력란(Input.text)에 입력하기 위한 힌트를 주기 위해 많은 경우 GUI에서는 라벨을 써서 표시하곤 했다. 그러나 라벨이 반드시 사용하기에 편한 것은 아니다. 입력란 속에 공백을 채우기 보다는 힌트를 처음부터 표시하는 방법이 최근 웹프로그램에서 자주 보는 방법이다.
이 페이지는 그 자바스크립트를 소개한다.
html본문에서의 요소
여기에 입력 포커스를 가져가면 공백이 된다.
공백인 채로 다른 곳에 이동하면 다시 초기 글자가 나온다.
<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>
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)를 만드는 방법
'연구개발 이야기' 카테고리의 다른 글
| 소스코드리뷰(X) inet.ocx를 쓰는 것은 신중을 요한다 (2) | 2010.05.23 |
|---|---|
| 소스코드리뷰(IX) 불필요한 주석을 빼라 (0) | 2010.05.23 |
| 웹프로그램 연구(VII) Input.text요소의 힌트용 스크립트 (1) | 2010.05.23 |
| 소스코드리뷰(VIII) 논리판단을 줄여라 (0) | 2010.05.23 |
| 소스코드리뷰(VII) 한두줄의 작은 함수를 만들어라 (0) | 2010.05.23 |
이글에 방문하는 사람은 심심치 않게 많았다. 아마 어디선가 사용되고 기여하고 있을 것이다. 고생하는 개발자 화이팅입니다. 힘내세요. 주인장백.