입력 입력 상자가 포커스를 얻거나 잃을 때 텍스트 숨기기/표시(jquery 버전)_jquery

입력 상자는 포커스를 얻거나 잃을 때 텍스트를 숨기거나 표시합니다.
입력 상자의 기본 상태:

입력 상자는 포커스 상태를 갖습니다. :

렌더링에서 검색 입력 상자를 볼 수 있습니다. "사용자 이름/이메일" 프롬프트가 기본적으로 표시됩니다. 입력 상자에 초점이 맞춰지면 자동으로 지워지고 사용자 입력을 기다립니다. 사용자가 아무것도 입력하지 않으면 입력 상자에서 나가게 되며 입력 상자에 "사용자 이름/이메일"이라는 메시지가 다시 표시됩니다. 매우 흔한가요? 많은 검색, 로그인 및 양식에서 이 효과를 사용하지만 많은 웹사이트를 살펴보았는데 그 중 90% 이상이 다음과 같은 방식으로 구현되었습니다.

코드 복사 코드는 다음과 같습니다.

저는 자바스크립트 작성을 매우 반대합니다. in html 태그에서는 html 태그의 작성 스타일과 동일하지만 W3C 표준을 위반하지는 않지만 이렇게 작성하는 것은 권장되지 않습니다. 왜냐하면:
1. 재사용성이 전혀 없습니다. 입력 상자가 많은 양식이고 각각에 이러한 효과가 필요한 경우 각각을 이런 방식으로 처리해야 합니까?
2. 프롬프트 텍스트를 수정하려면 시간이 많이 걸리고 힘들며 유지 관리가 어렵습니다.
3. 구조(html), 성능(css), 동작(javascript)의 분리를 옹호합니다.
그렇다면 js를 html로 작성하지 않고도 재사용이 가능하고 유지 관리가 쉬운 이 효과를 얻으려면 어떻게 작성해야 할까요?
구체적인 방법은 다음과 같습니다.
먼저 jQuery를 도입해야 합니다
Html 코드:

코드 복사 코드는 다음과 같습니다.

jQuery 코드:

코드 복사 코드는 다음과 같습니다.

"input_test" 클래스를 추가하면 쉽게 구현할 수 있습니다. 구현된 입력 상자
보기: 데모