• 목록

아주 간단하게 focus 이벤트를 사용하면 됩니다!
아래는 순수 JavaScript로 input 클릭(포커스) 시 placeholder를 없애고,
포커스가 해제되면 다시 placeholder를 복원하는 예시입니다.[code]<input type="text" id="searchWord" placeholder="영화, 드라마, 예능, 시사/다큐" />

<script>
  const searchInput = document.getElementById('searchWord');
  const originalPlaceholder = searchInput.placeholder;

  searchInput.addEventListener('focus', function() {
    this.placeholder = '';
  });

  searchInput.addEventListener('blur', function() {
    this.placeholder = originalPlaceholder;
  });
</script>[/code]

같은 동작을 jQuery로 하면 이렇게 작성하면 됩니다[code]<input type="text" id="searchWord" placeholder="영화, 드라마, 예능, 시사/다큐" />

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
  $(document).ready(function() {
    var $searchInput = $('#searchWord');
    var originalPlaceholder = $searchInput.attr('placeholder');

    $searchInput.on('focus', function() {
      $(this).attr('placeholder', '');
    });

    $searchInput.on('blur', function() {
      $(this).attr('placeholder', originalPlaceholder);
    });
  });
</script>[/code]✅ 포인트
$(document).ready()로 DOM이 준비된 뒤에 실행.
.attr('placeholder', '')로 placeholder를 비움.
blur 이벤트로 포커스 해제 시 원래 텍스트 복원.

✅ input이 여러 개일 때 공통으로 적용하는 jQuery 버전 예시[code]<!-- 공통 클래스 placeholder-clear 사용 -->
<input type="text" class="placeholder-clear" placeholder="영화, 드라마, 예능, 시사/다큐" />
<input type="text" class="placeholder-clear" placeholder="노래 제목, 가수, 앨범 검색" />
<input type="text" class="placeholder-clear" placeholder="검색어를 입력하세요" />

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('.placeholder-clear').each(function() {
      var $input = $(this);
      var originalPlaceholder = $input.attr('placeholder');

      $input.on('focus', function() {
        $(this).attr('placeholder', '');
      });

      $input.on('blur', function() {
        $(this).attr('placeholder', originalPlaceholder);
      });
    });
  });
</script>[/code]✅ 핵심 아이디어
$('.placeholder-clear').each()로 해당 클래스가 달린 모든 input 순회.
각각의 placeholder 원본을 기억.
focus 시 placeholder 제거, blur 시 원래대로 복구.