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

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

CSS는 입력 필드에 텍스트가 포함되어 있는지 감지하기 위한 제한된 옵션을 제공합니다. :empty pseudo-class 및 [value=""] 선택기는 만족스러운 결과를 제공하지 않습니다.

:placeholder-shown을 사용한 솔루션

자리 표시자가 있는 입력 필드의 경우 속성을 사용하면 :placeholder-shown 가상 클래스를 활용할 수 있습니다. placeholder 속성은 입력이 비어 있을 때 나타나는 자리 표시자 텍스트를 정의합니다. 이 속성을 활용하면 다음 CSS 규칙을 적용할 수 있습니다.

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

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

입력이 비어 있으면 자리 표시자 텍스트가 표시되고 입력 테두리가 빨간색으로 설정됩니다. 사용자가 텍스트를 입력하면 자리 표시자 텍스트가 사라지고 테두리 색상이 녹색으로 변경되어 입력 내용에 텍스트가 있음을 나타냅니다.

제한 사항

이 솔루션에는 일부 제한 사항:

• 입력 필드에 자리 표시자가 있어야 합니다. 속성.
• 자리 표시자 텍스트는 비워둘 수 없습니다. 그러나 단일 공백 ​​문자를 사용하여 보이지 않는 자리 표시자를 만들 수 있습니다.

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