HTML DOM Textarea 객체는 HTML 문서의
Textarea 객체 생성
구문
다음은 구문입니다 -
document.createElement(“TEXTAREA”);
Textarea 개체의 속성
속성 | 설명 |
---|---|
자동 초점 | 페이지가 로드될 때 텍스트 영역에 자동으로 포커스가 맞춰져야 하는지 여부를 반환하고 수정합니다. |
기본값 | HTML 문서에서 텍스트 영역 요소의 기본값을 반환하고 수정합니다. |
열 | HTML 문서에서 텍스트 영역 요소의 cols 속성 값을 반환하고 수정한다. |
비활성화됨 | HTML 문서의 텍스트 영역 요소가 비활성화되었는지 여부를 반환하고 수정합니다. |
양식 | 텍스트 영역을 둘러싸는 형식의 인용문을 반환합니다. |
최대길이 | HTML 문서에서 텍스트 영역 요소의 maxLength 속성 값을 반환하고 수정합니다. |
이름 | HTML 문서에서 텍스트 영역 요소의 name 속성 값을 반환하고 수정합니다. |
자리 표시자 | HTML 문서에서 텍스트 영역 요소의 placeholder 속성 값을 반환하고 수정합니다. |
읽기 전용 | HTML 문서의 텍스트 영역 요소의 내용을 읽기 전용으로 할지 여부를 반환하고 수정합니다. |
필수 | HTML 문서에서 텍스트 영역의 필수 속성 값을 반환하고 수정합니다. |
행 | HTML 문서에서 텍스트 영역 요소의 rows 속성 값을 반환하고 수정합니다. |
유형 | 텍스트 영역이 HTML 문서에 있는 양식 요소의 유형을 반환합니다. |
값 | HTML 문서에서 텍스트 영역 요소의 내용을 반환하고 수정합니다. |
랩 | HTML 문서에서 텍스트 영역 요소의 wrap 속성 값을 반환하고 수정합니다. |
Textarea 객체의 메소드
메소드 | 설명 |
---|---|
선택() | HTML 문서에서 텍스트 영역의 내용을 선택합니다. |
Textarea 개체의 예를 살펴보겠습니다.
예시
<!DOCTYPE html> <html> <style> body { color: #000; background: lightseagreen; height: 100vh; text-align: center; } .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; } </style> <body> <h1>DOM Textarea Object Demo</h1> <button onclick="create()" class="btn">Create Textarea</button> <script> function create() { var ta = document.createElement("TEXTAREA"); ta.innerHTML = "Hi! I'm a textarea element in an HTML document with some dummy text."; ta.setAttribute('rows', '8'); document.body.appendChild(ta); } </script> </body> </html>
출력
"텍스트 영역 만들기를 클릭합니다. " 버튼을 눌러 텍스트 영역 요소를 만듭니다.