✏️ text 입력에 변화가 생기면 작동하는 Js
📍 기능 설명
📍 적용해보기
- 콘솔에서 확인할 수 있는 로직을 추가해주었다.
- 괄호의 ‘ ‘ 안에 text 를 입력하고 조건을 충족시키면
콘솔에 ‘ ‘ 에 적은 message 가 출력된다.
🔗 코드팬 링크
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<input type="text"
name="username"
placeholder="인스타그램 아이디"
onchange="console.log('onchange');"
onkeyup="console.log('onkeyup');"
onpaste="console.log('onpaste');">
<div>
<span>https://instagram.com/</span>
<span></span>
</div>
📍 span 의 text 로 출력시키기
- on 관련 속성에 아래의 j query 코드를 입력하면 다른 태그의 text 값에 추가할 수 있음
$(this).next()
children(':last-child')
🔗 코드팬 링크
onkeyup="$(this).next().children(':last-child').text('안녕하세요')"
<div>
<span>https://instagram.com/</span>
<span></span>
</div>
📍 text 박스에 입력한 text 를 span 의 text 로 출력시키기
- 3가지 속성에 모두 span 을 가리키는 선택자를 입력하고,
text 박스에 입력된 값에 공백을 제거해 text 로 출렧히키는 js 를 추가했다.
- .text(this.value.trim())
- 이렇게 하면 원하는데로 작동은 성공하지만,
중복된 코드로 인해 가독성이 너무 떨어지게 된다.
🔗 코드팬 링크
<input type="text"
name="username"
placeholder="인스타그램 아이디"
onchange="$(this).next().children(':last-child').text(this.value.trim());"
onkeyup="$(this).next().children(':last-child').text(this.value.trim());"
onpaste="$(this).next().children(':last-child').text(this.value.trim());" ">
<div>
<span>https://instagram.com/</span><span></span>
</div>
📍 기능 위임을 통해 문제 해결
- 특정 속성의 조건을 충족시키면 바로 로직을 수행하지 않고 다른 속성에 위임시킨 후,
하나의 속성에서 로직을 처리하게 하면 중복을 제거할 수 있다.
- onchange
와 onpaste
의 조건이 충족되면 onkeyup
가 호출되는 코드를 추가했다.
🔗 코드팬 링크
<input type="text"
name="username"
placeholder="인스타그램 아이디"
onchange="$(this).keyup();"
onkeyup="$(this).next().children(':last-child').text(this.value.trim());"
onpaste="$(this).keyup());">
<div>
<span>https://instagram.com/</span><span></span>
</div>