자바스크립트 input Text(텍스트) 객체 간단하게 알아보기
Text 객체는 문자열을 입력하고자 할 때 사용됩니다. 다들 아시다시피 input 태그의 text를 가리키는 겁니다.
하지만 많은 양의 문자열을 입력할 수는 없습니다. 자바스크립트를 사용하면서 많이 사용하게 되는 객체 중에 하나입니다.
텍스트 객체의 속성 -
메소드 |
내용 |
name |
이름을 지정할 때 사용한다 |
value |
사용자가 입력한 값을 가지고 있는 속성 |
defaultValue |
사용자가 입력하지 않았을 경우에 디폴트로 관리자가 지정해준다. |
type |
형태를 지정해준다. |
텍스트 객체의 메소드 -
메소드 |
내용 |
focus() |
엡력 커서가 이동했을 때 필요하다 |
blur() |
입력 커서가 벗어났을 때 필요하다 |
select() |
입력한 값을 선택할 때 사용한다 |
텍스트 객체의 이벤트 핸들러 -
이벤트 핸들러 |
내용 |
onFocus |
입력 커서가 Text 객체 안으로 이동할 때 발생 |
onBlur |
입력 커서가 Text 객체에서 벗어날 때 발생 |
onSelect |
입력한 문자열을 선택할 때 발생 |
onChange |
입력한 값을 변경할 때 발생 |
1. 텍스트 객체의 속성
여기서는 Text 객체의 속성에는 defaultValue, name, type, value 속성이 있는데 그중 defaultValue 속성을 살펴봅시다.
이 속성은 입력한 값이나 입력하지 않았을 때 텍스트 객체에 보여지는 속성이죠.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> function kebi(duck){ var turtle=duck.value kebi.value=turtle.toUpperCase() } function resetValue(form){ form.rabbit1.value=form.rabbit1.defaultValue form.rabbit2.value=form.rabbit2.defaultValue } </script> </head> <body> <h2>주소와 우편번호를 입력하세요.</h2> <form> 주소 : <input type="text" name="rabbit1" value="입력하세요." onChange="kebi(this)"><br> 우편번호 : <input type="text" name="rabbit2" value="입력하세요." onChange="kebi(this)"><br> <input type="button" value="클릭!" onclick="resetValue(this.form)"> </form> </body> </html> | cs |
2. 텍스트 객체의 메소드
text 객체의 메소드에는 focus(), blur(), select() 메소드가 있는데 이중에서 select() 메소드에 대해서 살펴보도록 하겠습니다.
텍스트 박스에 입력한 문자열을 비교할 수 있도록 해주는 메소드입니다. 이 예제에서는 텍스트 박스에 입력한 답을 버튼을 클릭해서 체크해줍니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> function kebi(form) { var rabbit = form.turtle1.value; if (rabbit == "") { alert("아무 것도 선택하지 않았습니다."); form.input.focus(); } else if (rabbit == "a" || rabbit == "A") { alert("맞습니다."); } else { alert("틀렸습니다. 다시 한번 클릭하세요."); form.turtle1.focus(); form.turtle1.select(); } } </script> </head> <body> <h2>주소와 우편번호를 입력하세요.</h2> <form> 답 : <input type="text" name="turtle1"> <input type="button" value="확인" onclick="kebi(this.form)"> </form> </body> </html> | cs |
'이전 게시글 > 컴퓨터#웹 Jv.Script' 카테고리의 다른 글
| 자바스크립트 Textarea 객체의 뜻과 간단예제 (0) | 2017.02.27 |
|---|---|
| 자바스크립트 Select(셀렉트박스) 객체 뜻과 간단예제 (0) | 2017.02.27 |
| 자바스크립트 개체 제어문을 알아보자 (0) | 2016.06.25 |
| 자바 스크립트 예약어의 종류 (0) | 2016.06.25 |
| [기초강좌] 자바스크립트의 기본 문법/변수 (0) | 2016.06.25 |
