CSSを使用して入力要素を読み取り専用にする方法

Web 開発では、フォーム要素は非常に一般的な要素タイプです。 input 要素はその 1 つで、テキスト、数値、日付などのユーザー入力を受け入れることができます。ただし、場合によっては、input 要素を読み取り専用に設定する必要があります。これは、ユーザーが何も入力できず、表示のみできることを意味します。この記事では、CSS を使用して入力要素を読み取り専用にする方法について説明します。

まず、通常の入力要素がどのように作成されるかを見てみましょう:

<input type="text" name="username" id="username">

これは、ユーザーが何でも入力できる基本的なテキスト入力ボックスです。次に、読み取り専用に設定する必要があります。これを行うには、以下に示すように、input 要素の「readonly」属性を使用します。

<input type="text" name="username" id="username" readonly>

「readonly」属性が設定されている場合、ユーザーはテキストを入力できません。ただし、この方法には欠点があります。ユーザーが編集ツールを使用して入力要素の属性を変更し、編集可能にしてしまう可能性があることです。したがって、CSS を使用して入力要素の読み取り専用ステータスを制御し、いかなる状況でも読み取り専用であることを保証する必要があります。

CSS を使用して読み取り専用の入力要素を設定する

ここでは、CSS を使用して入力要素を読み取り専用に設定する方法を説明します。まず、「input[readonly]」セレクターを使用して「readonly」属性を含むすべての入力要素を選択し、次に「pointer-events:none」および「background-color:#eee」CSS スタイル プロパティを追加します。それ。

input[readonly] {
   pointer-events:none;
   background-color:#eee;
}

「pointer-events:none」属性は、ユーザーがマウスまたは他のポインティング デバイスを介して読み取り専用の入力要素に対してクリックやマウスの出入りなどの操作を実行できないようにします。 。これにより、ユーザーによる入力要素の誤操作が防止されます。

「background-color:#eee」属性は、読み取り専用の入力要素を他の編集可能な入力要素と区別し、区別しやすくするためのものです。

これは、読み取り専用入力要素の完全な CSS スタイルです:

input[readonly] {
   pointer-events:none;
   background-color:#eee;
   border:none;
   color:#999;
}

このスタイルでは、「border:none」属性と「color:#999」属性も追加しました。これにより、読み取り専用の入力要素が他の編集可能な要素と区別できるように暗くなります。

もちろん、ニーズに応じてこれらのスタイルをカスタマイズできます。たとえば、Web サイトのスタイルに合わせて、読み取り専用の入力要素の背景色をグレーに設定し、フォントの色を濃いグレーに設定できます。

最後に注意すべき点は、CSS を使用して読み取り専用の入力要素を設定すると、あらゆる状況下で確実に読み取り専用になるようにできますが、サーバーから送信されるデータは検証してフィルター処理する必要があるということです。特に、フォームデータの検証と処理には注意が必要です。

結論

CSS は、入力要素の読み取り専用状態など、Web サイト上の要素のスタイルを簡単に制御できる非常に強力なツールです。 「pointer-events:none」と「background-color:#eee」を使用すると、どのような状況でも入力要素が読み取り専用になり、ユーザーの誤操作を回避できます。同時に、データのセキュリティを確保するために、フォームデータの検証とフィルタリングにも注意を払う必要があります。

以上がCSSを使用して入力要素を読み取り専用にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。