CSS만 사용하여 텍스트 입력 필드를 비밀번호 필드로 변환하는 방법은 무엇입니까?

CSS만으로 입력 필드를 비밀번호 필드처럼 보이게 만드는 방법

웹 개발에서 텍스트를 표시해야 하는 경우가 있습니다. 입력 필드를 숨겨진 문자가 있는 비밀번호 필드로 사용하여 사용자 개인정보를 보호합니다. 이는 HTML을 수정하거나 JavaScript를 사용하지 않고도 전적으로 CSS를 통해 달성할 수 있습니다.

CSS 솔루션:

텍스트 입력 필드를 비밀번호와 같은 필드로 변환하려면 , CSS는 -webkit-text-security(또는 text-security)라는 실험적인 선택기를 제공합니다. 이 선택기는 입력 필드의 시각적 모양을 제어하고 텍스트 입력에 대한 디스플레이 보안을 설정하는 데 사용할 수 있습니다.

구현:

이 솔루션을 사용하려면 - webkit-text-security 또는 text-security 선택기를 원하는 입력 필드에 추가하고 값을 디스크 또는 다른 원하는 문자로 설정하십시오. 예는 다음과 같습니다.

<code class="css">input.pw {
  -webkit-text-security: disc;
  text-security: disc;
}</code>

사용법:

텍스트 필드와 비밀번호 필드 간 표시를 전환하려면 양식에 버튼을 추가하고 JavaScript를 사용하여 다음을 수행할 수 있습니다. 입력 필드에서 비밀번호 클래스를 추가하거나 제거합니다.

<code class="html"><input type="text" class="pw" value="abcd">

<button onclick="this.previousElementSibling.classList.toggle('pw')">Toggle '•'</button></code>

브라우저 호환성:

-webkit-text-security 선택기는 다음과 같은 최신 브라우저에서 지원됩니다. 크롬, 사파리, 오페라. IE8을 지원하려면 텍스트 보안 선택기를 사용할 수 있습니다.

추가 참고 사항:

이 솔루션은 주로 시각적 표현에 영향을 미치며 복사/붙여넣기 기능을 방해하지 않습니다. 기본. 그러나 CSS 또는 JavaScript로 추가 조치를 구현하여 입력 필드에서 복사 및 붙여넣기를 제한할 수 있습니다.

위 내용은 CSS만 사용하여 텍스트 입력 필드를 비밀번호 필드로 변환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!