Chrome에서 포커스가 있을 때 자리 표시자 텍스트를 자동으로 숨기는 방법은 무엇입니까?

초점에 자리 표시자 텍스트 자동 숨기기: 종합 가이드

입력 필드에 자리 표시자 텍스트를 추가할 때 브라우저는 일반적으로 사용자가 초점을 맞추면 이를 숨깁니다. . 그러나 Chrome에서는 이 동작에 대한 예외가 발생합니다. 이 문제를 효과적으로 해결하기 위해 CSS와 jQuery를 모두 사용하여 잠재적인 솔루션을 살펴보겠습니다.

CSS 솔루션

<br>input:focus::placeholder { <br> 색상: transparent;<br>}<br>

이 CSS 규칙은 입력 필드가 포커스를 받을 때 자리 표시자 텍스트를 구체적으로 대상으로 하여 투명하게 만듭니다. 결과적으로 자리 표시자 텍스트가 페이드 아웃되어 원하는 자동 숨기기 동작을 시뮬레이션합니다.

jQuery 솔루션

CSS 솔루션은 대부분의 브라우저에 충분하지만 jQuery는 대안을 제공합니다. 추가 맞춤설정을 위한 접근 방식:

<br>$(function() {<br> $("input").focus(function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$(this).attr("placeholder", "");

로그인 후 복사

}).blur(function() {

$(this).attr("placeholder", "Type something here!");

});
});

이 jQuery 스크립트는 입력 시 포커스 및 블러 이벤트를 수신합니다. 필드. 필드에 초점이 맞춰지면 자리 표시자 속성이 지워지고 자리 표시자 텍스트가 사라집니다. 반대로 필드가 포커스를 잃으면 자리 표시자 텍스트가 복원됩니다.

결론

CSS를 사용하든, jQuery를 사용하든 제공된 솔루션 중 하나를 구현하면 다음을 효과적으로 수행할 수 있습니다. 초점이 맞춰진 자리 표시자 텍스트를 자동으로 숨겨 Chrome을 포함한 다양한 브라우저에서 사용자 경험을 향상합니다.

위 내용은 Chrome에서 포커스가 있을 때 자리 표시자 텍스트를 자동으로 숨기는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!