팁 게시판 글답변

글답변

이름

비밀번호

E-mail

홈페이지

옵션

HTML

제목

> 
 > 
 > "검색어"라는 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 자체를 제거하고 다시 복원하므로 더 명확한 제어가 가능합니다.
> 필요에 따라 두 방법 중 하나를 선택하여 적용하시면 됩니다
 > 
 >