ホームページ > 記事 > ウェブフロントエンド > CSS のみを使用してテキスト入力フィールドをパスワード フィールドに変換する方法
CSS だけで入力フィールドをパスワード フィールドのように見せる方法
Web 開発では、テキストを表示する必要がある場合があります。入力フィールドを隠し文字を含むパスワードフィールドとして使用し、ユーザーのプライバシーを確保します。これは、HTML を変更したり JavaScript を使用したりしなくても、完全に CSS を通じて実現できます。
CSS 解決策:
テキスト入力フィールドをパスワードのようなフィールドに変換するには, CSS では、-webkit-text-security (または text-security) という実験的なセレクターが提供されています。このセレクターは、入力フィールドの外観を制御し、テキスト入力の表示セキュリティを設定するために使用できます。
実装:
このソリューションを使用するには、 - webkit-text-security または text-security セレクターを目的の入力フィールドに入力し、値を disc または別の目的の文字に設定します。例を次に示します:
<code class="css">input.pw { -webkit-text-security: disc; text-security: disc; }</code>
使用法:
テキスト フィールドとパスワード フィールドの間で表示を切り替えるには、フォームにボタンを追加し、JavaScript を使用して、入力フィールドに pw クラスを追加または削除します。
<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 中国語 Web サイトの他の関連記事を参照してください。