INPUT TYPE - TEXT 속성
작성자 : 최고의하루
등록날짜 : 2008.12.04 14:19
# TEXT 태그관련
- Text태그에 관련된 스크립트 및 스타일 시트의 사용법을 살펴보자!!
* Sample(기본)
<input type='text' name='test' value='123'>
- 입력태그는 'text', 이름은 'test', 디폴트 값은 '123'이다.
* Sample(길이)
<input type='text' name='yyyymmdd' value='20040101' size='10' maxlength='8'>
- Text태그의 길이(size)는 10자리이면 최대입력자리수(maxlength)는 8이다.
가끔, maxsize로 적어 놓구 안 먹힌다구 우기는 눔들이 있다. 내가 그랬다!!
- 스타일 시트를 이용하여 길이를 조절할 수도 있다. [ style='width:50px' ]
가끔, Select Box의 길이를 조절할때가 생긴다. 그때 사용해두 조오타!!
* Sample(색상 및 모양)
<input type='text' name='yyyymmdd'
style='color:black;background-color:blue;margin:0;padding:0;border-width:0;'>
- Text태그에 입력된 글의 색깔(color)은 black이며 바탕색(background)은 blue이다.
margin, padding, border-width는 여백및 선의 두께를 의미한다.
- hidden type처럼 사용하고플때 사용하면 조오타!!
* Sample(정렬)
<input type='text' name='yyyymmdd'
style='text-align:right;'>
- Text태그에 입력된 글의 정렬은 right로 한다.
* Sample(읽기전용)
<input type='text' name='yyyymmdd' onfocus='blur()'>
<input type='text' name='yyyymmdd' readonly>
- onfocus='blur()' : Text태그에 포커스가 온 경우 blur하게 하여 글의 입력을 방해한다.
- readonly : Text태그는 '읽기전용'이라고 선언해 버린다. 깔끔!!
script에서 Text태그를 컨트롤 할때는
document.form.yyyymmdd.readOnly=true/false로 조절한다.
readOnly의 'O'를 주목하라. 대문자이다.
혹, 까먹는다면 밤새는 개 같은 경우가 생길 수도 있다. 진따로~~
* Sample(숫자만 입력가능)
<input type='text'
onkeypress="if (event.keyCode<48|| event.keyCode>57) event.returnValue=false;"
style='IME-MODE:disabled;'>
- onkeypress : 키보드가 눌러지고 난 후의 이벤트를 감지한다.
- event.keyCode : 키보드(?)의 값이 48과 57사이일때만 반응한다.(숫자)
숫자만 입력가능하게 처리할때가 많이 사용되어 진다.
이런경우, 기냥 원천봉쇄하라!! 깔끔하게!!
- IME-MODE:disabled : 입력모드의 디폴트가 영문이 되도록 처리.
다른눔을 쓰면 안 먹힌다. 이눔을 빼도 안 먹힌다. 골때리는 눔이다.
- Text태그에 관련된 스크립트 및 스타일 시트의 사용법을 살펴보자!!
* Sample(기본)
<input type='text' name='test' value='123'>
- 입력태그는 'text', 이름은 'test', 디폴트 값은 '123'이다.
* Sample(길이)
<input type='text' name='yyyymmdd' value='20040101' size='10' maxlength='8'>
- Text태그의 길이(size)는 10자리이면 최대입력자리수(maxlength)는 8이다.
가끔, maxsize로 적어 놓구 안 먹힌다구 우기는 눔들이 있다. 내가 그랬다!!
- 스타일 시트를 이용하여 길이를 조절할 수도 있다. [ style='width:50px' ]
가끔, Select Box의 길이를 조절할때가 생긴다. 그때 사용해두 조오타!!
* Sample(색상 및 모양)
<input type='text' name='yyyymmdd'
style='color:black;background-color:blue;margin:0;padding:0;border-width:0;'>
- Text태그에 입력된 글의 색깔(color)은 black이며 바탕색(background)은 blue이다.
margin, padding, border-width는 여백및 선의 두께를 의미한다.
- hidden type처럼 사용하고플때 사용하면 조오타!!
* Sample(정렬)
<input type='text' name='yyyymmdd'
style='text-align:right;'>
- Text태그에 입력된 글의 정렬은 right로 한다.
* Sample(읽기전용)
<input type='text' name='yyyymmdd' onfocus='blur()'>
<input type='text' name='yyyymmdd' readonly>
- onfocus='blur()' : Text태그에 포커스가 온 경우 blur하게 하여 글의 입력을 방해한다.
- readonly : Text태그는 '읽기전용'이라고 선언해 버린다. 깔끔!!
script에서 Text태그를 컨트롤 할때는
document.form.yyyymmdd.readOnly=true/false로 조절한다.
readOnly의 'O'를 주목하라. 대문자이다.
혹, 까먹는다면 밤새는 개 같은 경우가 생길 수도 있다. 진따로~~
* Sample(숫자만 입력가능)
<input type='text'
onkeypress="if (event.keyCode<48|| event.keyCode>57) event.returnValue=false;"
style='IME-MODE:disabled;'>
- onkeypress : 키보드가 눌러지고 난 후의 이벤트를 감지한다.
- event.keyCode : 키보드(?)의 값이 48과 57사이일때만 반응한다.(숫자)
숫자만 입력가능하게 처리할때가 많이 사용되어 진다.
이런경우, 기냥 원천봉쇄하라!! 깔끔하게!!
- IME-MODE:disabled : 입력모드의 디폴트가 영문이 되도록 처리.
다른눔을 쓰면 안 먹힌다. 이눔을 빼도 안 먹힌다. 골때리는 눔이다.
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
☞자세히보기 |
|
|