HTML DOM의 Textarea 객체는 HTML 문서 내 <textarea> 요소를 나타내는 객체입니다. 이 객체를 활용하면 자바스크립트로 여러 줄 텍스트 입력 영역을 동적으로 생성하고, 속성을 읽거나 수정할 수 있습니다.
Textarea 객체 생성하기
자바스크립트에서 Textarea 객체를 새로 만들려면 document.createElement() 메서드를 사용합니다.
문법
document.createElement("TEXTAREA");Textarea 객체의 주요 속성
Textarea 객체는 다음과 같은 속성들을 제공합니다.
| 속성 | 설명 |
|---|---|
| autofocus | 페이지가 로드될 때 해당 텍스트 영역에 자동으로 포커스가 설정되는지 여부를 반환하거나 설정합니다. |
| defaultValue | HTML 문서에서 텍스트 영역 요소의 기본값을 반환하거나 수정합니다. |
| cols | 텍스트 영역 요소의 cols(열 너비) 속성 값을 반환하거나 수정합니다. |
| disabled | 텍스트 영역 요소가 비활성화(disabled) 상태인지 여부를 반환하거나 설정합니다. |
| form | 텍스트 영역을 감싸고 있는 폼(form)의 참조를 반환합니다. |
| maxLength | 텍스트 영역 요소의 maxLength(최대 입력 글자 수) 속성 값을 반환하거나 수정합니다. |
| name | 텍스트 영역 요소의 name 속성 값을 반환하거나 수정합니다. |
| placeholder | 텍스트 영역 요소의 placeholder(안내 문구) 속성 값을 반환하거나 수정합니다. |
| readOnly | 텍스트 영역의 내용이 읽기 전용(read only)인지 여부를 반환하거나 설정합니다. |
| required | 폼 제출 시 텍스트 영역 입력이 필수(required)인지 여부를 반환하거나 설정합니다. |
| rows | 텍스트 영역 요소의 rows(행 높이) 속성 값을 반환하거나 수정합니다. |
| type | HTML 문서에서 텍스트 영역이 속한 폼 요소의 타입을 반환합니다. |
| value | 텍스트 영역 요소의 현재 내용을 반환하거나 수정합니다. |
| wrap | 텍스트 영역 요소의 wrap(줄바꿈 처리 방식) 속성 값을 반환하거나 수정합니다. |
Textarea 객체의 메서드
| 메서드 | 설명 |
|---|---|
| select() | 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>실행 결과
위 예제는 버튼 클릭 시 createElement("TEXTAREA")로 새로운 텍스트 영역을 생성하고, 임시 텍스트를 삽입한 뒤 rows 속성을 8로 지정하여 페이지에 추가하는 방식입니다.
화면에서 "Create Textarea" 버튼을 클릭하면 다음과 같이 textarea 요소가 동적으로 생성됩니다.
