일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 자바스크립트
- html
- input
- 인텔리제이
- 문자열
- Eclipse
- Array
- ArrayList
- 자바
- Files
- vscode
- js
- CSS
- 배열
- Visual Studio Code
- 이클립스
- json
- table
- list
- string
- Maven
- windows
- Java
- IntelliJ
- 테이블
- date
- 이탈리아
- CMD
- Button
- javascript
- Today
- Total
어제 오늘 내일
[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] <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] input type='file' 속성 알아보기 ( 파일 입력 )
input form에 이벤트가 발생했을 때
Javascript로 웹페이지의 dom에 접근하여,
입력된 값을 가져와서, 웹페이지에 뿌려주는 방법을 알아보았습니다.
'IT > Javascript' 카테고리의 다른 글
[Javascript] input 박스에 숫자만 입력되도록 설정하는 4가지 방법 (3) | 2020.08.12 |
---|---|
[Javascript] node type 체크하기 (0) | 2020.08.11 |
[Javascript] 세는 나이, 만나이 계산하기 (8) | 2020.08.09 |
[Javascript] 배열 정렬하기 (오름차순, 내림차순, 문자열, 객체) (3) | 2020.08.08 |
[Javascript] 배열의 합계, 평균 계산하기 - reduce(), reduceRight() (1) | 2020.08.08 |