CSS가 JavaScript 없이 외부 페이지의 텍스트 입력을 감지할 수 있습니까?

제어할 수 없는 외부 페이지에서 CSS를 사용하여 텍스트 입력 감지

입력 필드에 CSS를 통해서만 텍스트가 포함되어 있는지 확인하려면 다음을 고려하세요. 자리 표시자 속성을 사용합니다. 자리 표시자는 필수이며 비워둘 수 없지만 단일 공백으로 설정할 수 있습니다.

CSS 규칙 적용:

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

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

데모:

<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />

이 예에서는 자리 표시자가 있고 텍스트는 없는 입력입니다. 녹색 테두리가 표시되어 비어 있음을 나타냅니다. 반대로 자리 표시자와 텍스트가 있거나 공백만 있는 자리 표시자와 값이 있는 입력에는 빨간색 테두리가 표시됩니다.

추가 참고 사항:

• 이 방법은 :placeholder-shown이 다음을 표시하는 요소와 일치하는 의사 클래스이기 때문에 작동합니다. placeholder.
• :placeholder-shown은 모든 주요 브라우저에서 지원됩니다.

위 내용은 CSS가 JavaScript 없이 외부 페이지의 텍스트 입력을 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!