CSS コントロールは読み取り専用

CSS コントロール読み取り専用: CSS を使用して HTML フォームの読み取り専用コントロールを実装する方法

フロントエンド開発者は、多くの場合、HTML フォームを設計して実装する必要があります。場合によっては、特定のフィールドを読み取り専用にする必要があります。読み取り専用フィールドの内容はユーザーが表示できますが、変更することはできません。これにより、ユーザーがフォーム データを不必要に変更することがなくなり、データの整合性と正確性が保護されます。この記事では、CSS を使用して HTML フォームの読み取り専用制御を実装する方法を紹介します。

HTML フォームでフィールドを読み取り専用に設定するには、HTML 属性「readonly」を使用する方法と CSS スタイルを使用する方法の 2 つがあります。この方法のほうが柔軟で制御しやすいため、CSS を使用して読み取り専用を制御します。

CSS では、「pointer-events」属性を使用してフォーム フィールドの読み取り専用属性を制御できます。 Pointer-events は CSS3 の新しいプロパティであり、主に要素のマウス イベントをトリガーできるかどうかを制御するために使用されます。 「pointer-events:none」が設定されている場合、要素はマウス イベントに応答しないことを意味します。つまり、要素は読み取り専用コントロールになります。

1. HTML にフォーム要素を追加する

まず、HTML コードに読み取り専用に設定する必要があるフォーム要素を追加します。テキスト ボックスとパスワード、ボックス、ドロップダウン ボックスなど。以下は簡単な例です:

<label>用户名</label>
<input type="text" name="username" id="username" />

<label>密码</label>
<input type="password" name="password" id="password" />

<label>性别</label>
<select name="gender" id="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>

2. 読み取り専用 CSS スタイルをフォーム要素に追加します

次に、読み取り専用に設定する必要があるフォーム要素をCSS ファイルまたはスタイルタグ。 「pointer-events:none」属性を使用して要素を読み取り専用にできます。同時に、これらのフィールドにさまざまなスタイルを追加して強調表示することができます。以下に例を示します。

input[readonly], select[readonly] {
  pointer-events:none;
  background-color:#f0f0f0;
  color:#888;
}

この例では、「pointer-events:none」を使用して要素を読み取り専用に設定します。また、背景色をライトグレー、フォント色をダークグレーに設定し、要素に「readonly」属性を追加しました。その結果、これらのフォーム要素の背景色は明るい灰色に変わり、フォントの色は濃い灰色になり、変更できなくなります。

3. JavaScript を使用して読み取り専用状態を制御する

CSS スタイルを使用して読み取り専用状態を制御することに加えて、JavaScript を使用して読み取り専用状態を制御することもできます。フォーム要素。 JavaScript を使用する場合は、フォーム要素にイベント リスナーを追加する必要があります。これにより、フォーム要素の読み取り専用ステータスが変更されたときに、対応する JavaScript 関数が呼び出されます。以下に例を示します。

<input type="button" value="取消只读" onclick="makeReadonly(false)" />
<input type="button" value="设置只读" onclick="makeReadonly(true)" />

<script type="text/javascript">
function makeReadonly(isReadonly) {
  document.getElementById("username").readOnly = isReadonly;
  document.getElementById("password").readOnly = isReadonly;
  document.getElementById("gender").disabled = isReadonly;
  
  // 更新表单样式
  if (isReadonly) {
    document.getElementById("username").classList.add("readonly");
    document.getElementById("password").classList.add("readonly");
    document.getElementById("gender").classList.add("readonly");
  } else {
    document.getElementById("username").classList.remove("readonly");
    document.getElementById("password").classList.remove("readonly");
    document.getElementById("gender").classList.remove("readonly");
  }
}
</script>

この例では、フォーム要素を読み取り専用に設定するためのボタンと、読み取り専用状態をキャンセルするためのボタンの 2 つのボタンを追加しました。ユーザーがこれらのボタンをクリックすると、対応する JavaScript 関数が呼び出されます。この機能は、パラメータ値に基づいてフォーム要素の読み取り専用ステータスとスタイルを更新することです。

概要

この記事では、CSS スタイルを使用して HTML フォーム要素の読み取り専用ステータスを制御する方法を紹介しました。 CSS3 の「pointer-events」属性を利用すると、この関数を迅速に実装できます。同時に、JavaScript を使用してフォーム要素の読み取り専用状態を動的に制御する方法も示しました。 CSS または JavaScript を使用してフォーム要素の読み取り専用属性を制御する場合、これらの手法を使用すると、Web アプリケーションでより優れたデータ制御とユーザー エクスペリエンスを実現できます。

以上がCSS コントロールは読み取り専用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。