入力CSSを読み取り専用で実装する方法

私たちの Web デザインでは、input 要素を使用して入力ボックスの機能を実装することがよくあります。ただし、場合によっては、読み取り専用のテキスト情報を表示するなど、ユーザーがこれらの入力ボックスの内容を変更できないようにする必要があります。現時点では、input 要素の readonly 属性 readonly を使用して、この要件を達成できます。

input 要素の readonly 属性の機能は、入力ボックスを読み取り専用状態に設定することです。つまり、ユーザーは入力ボックスの内容を表示できますが、内容を変更または削除することはできません。 。これは、注文番号や製品の説明など、いくつかの情報をユーザーに表示する必要があるシナリオに非常に役立ちます。

CSS では、次の属性を使用して入力要素の読み取り専用ステータスを設定できます:

1. readonly

readonly 属性を使用するinput 要素を設定します。 読み取り専用ステータスに設定します。以下に示すように:

2. disabled

disabled 属性を使用して変更します入力要素は無効な状態に設定され、ユーザーはクリックしたり、アクションを実行したりできません。ただし、この場合、入力ボックスの内容はコピーできません。以下に示すように:

input 要素の読み取り専用状態を変更したい場合、一般的な方法が 2 つあります。メソッド :

1. JavaScript を使用して属性値を動的に変更します。

JavaScript スクリプトを使用して入力要素の読み取り専用属性値を動的に変更し、その読み取り専用を制御します状態。以下に示すように:

document.getElementById("myInput").readOnly = true;
document.getElementById("myInput").readOnly = false;

2. CSS を使用します。セレクターは読み取り専用の入力ボックスを選択します。

CSS セレクターを使用して読み取り専用の入力要素を選択し、それにスタイルを追加して外観を変更したり、他の効果をトリガーしたりします。以下に示すように:

input[readonly] {
color: #ccc;
カーソル: not-allowed;
}

summary

In Web ページをデザインする場合、読み取り専用の入力ボックスは非常に実用的な機能です。 input 要素を使用する場合、設計上のニーズを達成するために、readonly 属性を通じてそれを読み取り専用状態に設定できます。さらに、CSS セレクターと JavaScript スクリプトを使用することも、読み取り専用入力ボックスの状態を変更する一般的な方法です。

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