사용자가 Input 태그에 value를 입력하다가, Input 태그를 빠져나오면 ( focus 해제 )
Input 태그의 value 를 사용해 새로운 span 태그를 만든다.
구조
<!-- 전 -->
<Input type="text" value="test"></Input>
<div>
<span></span>
</div>
<!-- focus 벗어난 후 -->
<Input></Input>
<div>
<span>test</span>
</div>
필요한 기능
1. focus 상태를 감지하는 기능
2. input의 value값을, 다른 요소에 옮기는 기능
활용할 방법
1. javascript
1. Input 클릭시, Input를 제외한 body에 EventListener 추가
2. 사용자가 value를 입력
3. 사용자가 Input이 아닌 다른 body를 클릭
4. EventListener가 이벤트를 감지, Input의 value값을 span에 InnerText 로 넣음
반응형
