"검색어"라는 placeholder가 커서가 위치했을 때 사라지게 하려면

"검색어"라는 placeholder가 커서가 위치했을 때 사라지게 하려면, CSS 또는 JavaScript를 사용할 수 있습니다. 아래 두 가지 방법을 제안드립니다.
1. CSS만을 사용하는 방법
CSS의 :focus와 ::placeholder 가상 선택자를 사용하여 커서가 위치할 때 placeholder를 숨길 수 있습니다.

input:focus::placeholder {
    color: transparent; /* Placeholder 텍스트를 투명하게 만듭니다 */
}

이 코드를 스타일 시트에 추가하면, 사용자가 입력 필드를 클릭할 때 placeholder가 사라집니다. 이 방법은 간단하며 브라우저 호환성도 좋습니다.

2. JavaScript를 사용하는 방법
JavaScript로 더 확실하게 placeholder를 제어할 수 있습니다. focus 이벤트에서 placeholder를 빈 문자열로 만들고, blur 이벤트에서 다시 복원하는 방식입니다.

<input id="mo_top_search" type="text" name="stx" class="form-control" value="<?php echo $stx ?>" placeholder="검색어"
      onfocus="this.placeholder=''" onblur="this.placeholder='검색어'">

위 코드는 커서가 입력 필드에 들어갈 때(onfocus) placeholder가 사라지고, 커서가 필드를 벗어나면(onblur) 다시 "검색어"라는 텍스트가 나타나게 합니다.
결론
CSS 방법은 간단하고 빠르게 적용할 수 있지만, placeholder 텍스트는 여전히 DOM에 남아있고 단순히 투명하게 처리됩니다.
JavaScript 방법은 placeholder 자체를 제거하고 다시 복원하므로 더 명확한 제어가 가능합니다.
필요에 따라 두 방법 중 하나를 선택하여 적용하시면 됩니다