본문 바로가기

Web Dev/Javascript

[Javascript] 자바스크립트에서 Textarea 값 읽어오기 쉽지만 까먹죠 !

반응형

<textarea>는 HTML에서 여러 줄의 텍스트를 입력 또는 표시하는 데 사용되는 태그입니다. 다음은 <textarea> 요소의 사용법에 대한 간단한 설명입니다:

 

<textarea> 요소 생성:

<textarea id="myTextarea" rows="4" cols="50"></textarea>
  • id: 요소에 고유 식별자를 제공합니다. JavaScript에서 요소에 접근할 때 사용될 수 있습니다.
  • rows: 표시할 텍스트 영역의 행 수를 지정합니다.
  • cols: 표시할 텍스트 영역의 열 수를 지정합니다.

기본 텍스트 설정:

<textarea id="myTextarea" rows="4" cols="50">기본 텍스트</textarea>


<textarea> 태그 내에 기본 텍스트를 포함시킬 수 있습니다.

JavaScript를 사용하여 내용 동적 설정:

document.getElementById("myTextarea").value = "동적으로 설정된 내용";

JavaScript를 사용하여 <textarea>의 내용을 동적으로 설정할 수 있습니다. value 속성을 사용하여 내용을 변경할 수 있습니다.

<textarea>의 내용 가져오기:

var textareaContent = document.getElementById("myTextarea").value;
console.log(textareaContent);

JavaScript를 사용하여 <textarea>의 내용을 가져올 수 있습니다. value 속성을 사용하여 내용을 확인할 수 있습니다.

<textarea>는 <input> 태그와는 달리 여러 줄의 텍스트를 입력할 수 있어 긴 텍스트 블록을 다루는 데 유용합니다.

 

Textarea 엘리먼트에는 value 속성이 아니라 내용을 설정하는 방식으로 사용됩니다. 따라서 value 속성에 직접 값을 할당하는 방법은 지원되지 않습니다.

대신, JavaScript를 사용하여 해당 textarea 엘리먼트의 내용을 동적으로 설정할 수 있습니다. 아래는 JavaScript를 사용하여 textarea의 내용을 변수 "wr_content"로 설정하는 예시 코드입니다.

 

var wr_content = "변수에 저장된 내용";  // wr_content 변수에 원하는 값을 저장합니다.
document.getElementById("wr_content").textContent = wr_content;  // textarea의 내용을 변수 값으로 설정합니다.

위 코드를 사용하여 변수 "wr_content"의 값을 textarea의 내용으로 설정할 수 있습니다. 변수 값에 따라 textarea에 동적으로 내용이 표시될 것입니다.

반응형