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 サイトの他の関連記事を参照してください。