input 입력 값 삭제하는 동적 clear버튼

블로그를 처음 시작하면서 '코딩은 안 올려야지' 라고 생각했지만 아무래도 케이스 스터디와 같은 느낌의 개인 기록용으로 올리고 싶은 마음이 생깁니다. 아직 조금 웹퍼블리셔입니다. 코드가 어설프더라도 이해해주시고 실력이 향상되는 데로 추가적인 포스팅 혹은 수정을 통해 디벨롭해 보도록 하겠습니다.

 

첫 포스팅은 너무 흔한 UI지만 구글신에게 물어볼 검색 키워드를 쉽게 찾지 못했던 input에 동적인 clear버튼 넣기입니다.

 

생각보다 정보를 찾기 어려웠고, 너무 많이 사용되는 UI라 저와 같은 초급 코더가 보면 좋겠습니다.

 

[ HTML ]

<div class="clear-input-box">
	<input type="text" class="clearInput">
	<button type="button" class="clearBtn" style="visibility: hidden">clear</button>
</div>

[ JS ]

$(document).ready(function(){
  $('.search-input-box, .clear-input-box').each(function(){
    $(this).find('.clearInput').on('keyup focus', function(){
      $(this).siblings('.clearBtn').attr('style', 'visibility: visible');

      if($(this).val().length == 0){
        $(this).siblings('.clearBtn').attr('style', 'visibility: hidden');
      } else {
        $(this).siblings('.clearBtn').attr('style', 'visibility: visible');
      }
    });
  
    $(this).find('.clearInput').on('blur', function(){
      $(this).siblings('.clearBtn').attr('style', 'visibility: hidden');
    });
  
    $(this).find('.clearBtn').on('click touchstart', function(){
      $(this).closest('.clear-input-box').find('.clearInput').val('');
      $(this).closest('.clear-input-box').find('.clearBtn').attr('style', 'visibility: hidden');
      return false;
    });
  });
});

자주 사용되는 곳이 검색이나 로그인, 회원가입과 같은 페이지임을 고려해 작성해두었습니다.