Javascript - input text 값 가져오기

Javascript로 <input>에 입력된 text 값을 가져오는 방법을 소개합니다.

사용자가 입력할 때마다 text 값 읽기

HTML

HTML은 아래와 같이 input을 이용하여 사용자로부터 입력받고, key를 누를 때마다 Javascript의 userNameChanged() 함수를 호출하도록 하였습니다.

• onkeyup : key up 이벤트가 발생할 때 함수를 실행

<input type='text' id='name' name='username' onkeyup='userNameChanged()' value='' />
<div>result:</div>
<div id='result'></div>

Javascript

Javascript의 userNameChanged() 함수에서는

• getElementById('name')으로 id가 name인 input 요소를 가져오고, value 값을 가져옴
• getElementById('result')으로 id가 result인 div 요소를 가져오고 innerText에 input 값을 입력
• console 로그 출력

function userNameChanged() {
  const text = document.getElementById('name').value;
  document.getElementById('result').innerText = text;
  console.log(text);
}

• 이 예제에서는 key를 누를 때마다 텍스트 값을 읽도록 구현했지만, 모든 텍스트를 입력하고 어떤 버튼을 누를 때 한번만 텍스트 값을 읽도록 할 수도 있습니다.

• getElementById() 대신에 querySelector() 등의 함수를 이용하여 input element를 찾을 수 있습니다.

Output