text 박스로 text 입력하기

알파로그·2023년 4월 17일
0

HTML / CSS

목록 보기
5/6

✏️ text 입력에 변화가 생기면 작동하는 Js

📍 기능 설명

  • onkeyup
    • 입력을 완료 하는순간 작동됨
  • onchange
    • 변화가 감지되면 작동됨
  • onpaste
    • 붙여넣기 하는순간 작동됨

📍 적용해보기

  • 콘솔에서 확인할 수 있는 로직을 추가해주었다.
    • 괄호의 ‘ ‘ 안에 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>

📍 기능 위임을 통해 문제 해결

  • 특정 속성의 조건을 충족시키면 바로 로직을 수행하지 않고 다른 속성에 위임시킨 후,
    하나의 속성에서 로직을 처리하게 하면 중복을 제거할 수 있다.
    - onchangeonpaste 의 조건이 충족되면 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>
profile
잘못된 내용 PR 환영

0개의 댓글