CSS만 사용하여 HTML 입력 필드에서 텍스트 입력을 어떻게 감지할 수 있습니까?

CSS를 사용하여 텍스트 입력 감지

CSS를 사용하여 웹페이지를 사용자 정의할 때 공통 요구 사항이 발생합니다. 입력 필드에 텍스트가 포함되어 있는지 감지하는 기능입니다. . 놀랍게도 이 기능은 CSS에서 직접 제공되지 않습니다.

시도한 솔루션

:empty 의사 클래스 사용 및 빈 값 확인 등 다양한 접근 방식이 성공하지 못했습니다. [value=""].

CSS 자리 표시자 접근법

그러나 입력 필드에 자리 표시자 속성이 있는 경우 CSS는 :placeholder-shown 의사 클래스라는 솔루션을 제공합니다. 이 클래스는 빈 입력 필드와 자리 표시자가 있는 입력 필드를 구별하는 데 사용할 수 있습니다.

구현

핵심은 자리 표시자 속성이 존재하고 다음을 포함하는지 확인하는 것입니다. 단일 공백이더라도 공백이 아닌 값입니다. 예는 다음과 같습니다.

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

결론

:placeholder-shown 의사 클래스를 활용하면 입력 필드에 텍스트가 포함되어 있는지 여부를 효과적으로 감지할 수 있습니다. 당신은 통제할 수 없습니다.

위 내용은 CSS만 사용하여 HTML 입력 필드에서 텍스트 입력을 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!