어제 오늘 내일

[Javascript] textarea 값 가져오기, 넣기, 지우기 본문

IT/Javascript

[Javascript] textarea 값 가져오기, 넣기, 지우기

hi.anna 2024. 2. 4. 06:32

 

<textarea> 값 가져오기, 넣기, 지우기

 

다음은 textarea의 값을 읽고, 쓰고, 지우는 예제입니다.

 

<!-- textarea -->
<div>
  <textarea id="myTextarea">안녕하세요</textarea>
</div>

<!-- button -->
<button onclick="getTextareaValue()">값 가져오기</button>
<button onclick="setTextareaValue()">값 설정하기</button>
<button onclick="clearTextarea()">값 삭제하기</button>

<div id='result'></div> 
// textarea의 값을 가져와서 출력
function getTextareaValue() {
  // textarea 값 읽어오기
  const textareaValue = document.getElementById('myTextarea').value;
  // 읽어온 내용 출력
  document.getElementById('result').innerText = textareaValue;
}

// textarea에 새로운 값을 설정
function setTextareaValue() {
  const newValue = '새로운 텍스트 내용';
  document.getElementById('myTextarea').value = newValue;
}

// textarea의 값을 삭제
function clearTextarea() {
  document.getElementById('myTextarea').value = '';
}

 

  textarea 값 출력하기  

const textareaValue = document.getElementById('myTextarea').value;

document.getElementById() 함수를 이용하여 textarea를 선택한 후,

value 속성의 값을 읽어옵니다.

 

  textarea 값 설정하기  

document.getElementById('myTextarea').value = "새로운값";

선택된 textarea의 value를 설정하려는 새로운 값으로 지정합니다.

 

  textarea 값 삭제하기  

document.getElementById('myTextarea').value = "";

선택된 textarea의 value를 빈값("")으로 설정합니다.

 

 

 

 

 

 

 

반응형
Comments