오늘은 input태그와 button태그를 이용해서 input태그 안에 적힌 텍스트를 화면에 출력해보고 이를 다시 form태그를 이용하여 구현해보려 한다.
html, css, js소스는 아래와 같다.
💻 소스
<!-- html -->
<body>
<input type="text" placeholder="input anything" autofocus />
<button>button</button>
<ul>
<li>exam</li>
</ul>
</body>/* CSS */
input {
padding: 10px;
}
button {
border: none;
outline: none;
border-radius: 3px;
padding: 10px 15px;
color: white;
background-color: black;
cursor: pointer;
}// JavaScript
const input = document.querySelector('input');
const btn = document.querySelector('button');
const ul = document.querySelector('ul');
const addItem = () => {
const text = document.createElement('li');
text.innerText = input.value;
ul.appendChild(text);
input.value = '';
input.focus();
}
btn.addEventListener('click', addItem);
input.addEventListener('keydown', (e) => {
if(e.key === 'Enter'){ // 눌린 키가 Enter일 때 텍스트 추가
addItem();
}
});📌 주요 구현 사항 정리
html
- input: 텍스트를 입력하고 엔터 버튼을 눌렀을 때 발생하는 이벤트를 담당할 element.
placeholder: 해당 속성에 string 값을 적어주면 문자열을 아무것도 입력하지 않았을 때 기본 값으로 보여짐.
autofocus: 해당 페이지가 처음 실행될 때 input element로 자동 포커싱됨. 즉 자동으로 커서가 활성화되어 깜빡거림. - button: 버튼을 클릭했을 때 발생하는 이벤트를 담당할 element.
- ul: 텍스트가 적힌 li를 자식 element로 추가.
- li: input에서 입력받은 값을 표시
JavaScript
- element가져오기
document.querySelector(): element를 가져올 수 있음. ()안에는 css에서 작성하는 선택자와 동일하게 string type으로 작성하면 됨. - addItem() ➡ 입력한 텍스트를 화면에 표시하기
document.createElement('li'): 새로운 element를 생성. ()안에는 태그명을 string type으로 작성하면 됨. + 새로 추가한 element에 class같은 속성값을 정해주고 싶다면 document.setAttribute()를 이용하면 됨.
text.innerText = input.value: text element(위에서 생성한 li element)안에 입력받은 값을 저장. 저장하는 값은 string type이어야 하고 input에서 입력한 값은 input element가 가지고 있는 value 속성으로 가져올 수 있음.
ul.appendChild(text): 위에서 입력받은 값을 text element에 추가했고, 이를 최종적으로 부모 element인 ul의 마지막 자식 노드로 추가.
input.value = '': input element의 value값을 초기화.
input.focus(): Enter키를 누르거나 button을 클릭했을 때 input에 있던 포커싱이 사라지는데, focut()메소드를 이용해서 다시 포커싱될 수 있도록 함. - eventListener 등록
btn.addEventListener('click', ... ): 버튼을 클릭하면 click이벤트가 발생함. 이때 위에서 정의해준 addItem함수를 호출.하면 됨.
input.addEventListener('keydown', ... ): 키보드에서 아무 키를 누르면 keydown이벤트가 발생함. Enter키를 눌렀을 때만 addItem함수가 호출되어야 하므로 이벤트 발생시 전달받을 수 있는 매개변수인 event안 type속성을 이용하여 type이 'Enter'일 때만 addItem함수를 호출할 수 있도록 함.
❓ form 태그
input, button 태그로만 구현했다. 하지만 form 태그를 이용하면 input에서 발생하는 keypress(Enter)이벤트와 button에서 발생하는 click이벤트를 처리할 수 있다.
<!-- form추가 -->
<body>
<form>
<input type="text" placeholder="input anything" autofocus />
<button>button</button>
</form>
<ul>
<li>exam</li>
</ul>
</body>// submit 이벤트
const form = document.querySelector('form');
const input = document.querySelector('input');
// const btn = document.querySelector('button');
const ul = document.querySelector('ul');
const addItem = () => {
const text = document.createElement('li');
text.innerText = input.value;
ul.appendChild(text);
form.reset(); // input.value = '';와 동일
input.focus();
}
// btn.addEventListener('click', addItem);
// input.addEventListener('keydown', (e) => {
// if(e.key === 'Enter'){ // 눌린 키가 Enter일 때 텍스트 추가
// addItem();
// }
// });
form.addEventListener('submit', e => {
addItem();
e.preventDefault(); // 브라우저 새로고침 방지
});form태그를 이용하면 input, button에 발생하는 이벤트를 각각 이벤트리스너를 등록할 필요 없이 submit이벤트 하나로 대체할 수 있다...! 대신 form태그는 이벤트가 발생할 때마다 브라우저가 새로고침되는 것이 기본 동작이기 때문에 새로고침되어 기껏 추가한 텍스트들이 사라지는 것을 막기 위해서 event.preventDefault()를 써야 한다. 또, input태그에 남아있는 value를 지우기 위해 form element에 있는 reset() 메소드를 이용하면 input.value = ''와 동일하게 동작한다.
✅ 결과
input, button태그만 이용한 것과 form태그를 이용한 것 모두 결과가 동일하다.
'Front > make anything' 카테고리의 다른 글
| [HTML + CSS] checkbox, label로 트리 만들기 (0) | 2021.11.12 |
|---|