[Javascript] input 입력값 가져와서 출력하기

 

<input> 필드에 입력받은 값을 화면에 출력하는 방법입니다.

 

 

 사용자가 타이핑 할때마다 input 값 출력하기 

See the Pen js by anna (@hianna) on CodePen.

 

 HTML 

<input id='name' onkeyup='printName()'/>
<div id='result'></div>

<input id='name' onkeyup='printName()'/>

사용자로부터 값을 입력 받을, id='name'인 <input> element를 생성하였습니다.

onkeyup 이벤트(키보드가 눌려졌을 때 발생하는 이벤트)가 발생하면, printName() 메소드를 호출하도록 하였습니다.

 

<div id='result'></div>

<input> 폼에 입력받은 값을 출력할 위치입니다.

 

 

 Javascript 

function printName()  {
  const name = document.getElementById('name').value;
  document.getElementById("result").innerText = name;
}

const name = document.getElementById('name').value;

document.getElementById는 웹페이지에서 id로 element를 찾습니다.

그리고, 찾아온 element의 value값을 읽어와서 name에 저장하였습니다.

 

document.getElementById("result").innerText = name;

document.getElementById로 웹페이지에서 'result' id를 가진 element를 찾아오고,

innerText 프로퍼티를 사용하여, element의 text값을 name으로 변경해 주었습니다.

 

 

 

 사용자가 입력을 완료하면 input 값 출력하기 

See the Pen js by anna (@hianna) on CodePen.

 

사용자가 입력을 완료하고, 마우스 커서를 input form 밖으로 이동시켰을 때

값을 읽어와서 화면에 출력하는 예제입니다.

 

'사용자가 타이핑 할때마다 input 값 출력하기' 예제와 동일하고,

발생 시키는 이벤트를 'onchange' 이벤트로 변경하였습니다.

 

---

 

input form에 대한 다른 포스팅

[HTML]<form>태그로 사용자 입력 받기

[HTML] <input type="text" /> 태그로 패스워드(비밀번호) 입력란 만들기`

[HTML] 입력받은 데이터 서버로 전송하기 - submit

[HTML] <input type="text" /> 태그로 버튼(button) 생성하기

[HTML] <input type="text" /> 태그로 체크박스(checkbox) 만들기

[HTML] <input type="text" /> 태그로 라디오버튼(radio) 만들기

[HTML] 입력 데이터 초기화를 위한 리셋 버튼(reset) 만들기

[HTML] 날짜, 시간, 년도 입력받기

[HTML] 날짜, 시간 입력 항목 기본값으로 세팅하기

[HTML] 날짜 입력 항목에 현재 시간을 기본값으로 세팅하기

[HTML] 사용자로부터 색깔 입력받기

[HTML] input type='file' 속성 알아보기 ( 파일 입력 )

[Javascript] 로컬 텍스트 파일 읽기 (다중 파일 선택)

[Javascript] 디렉토리 선택하여 파일 리스트 가져오기 (이름, 상대경로)

 

---

 

input form에 이벤트가 발생했을 때

Javascript로 웹페이지의 dom에 접근하여,

입력된 값을 가져와서, 웹페이지에 뿌려주는 방법을 알아보았습니다.