CSSで入力ボックスを編集不可に設定する方法

CSS で入力ボックスを編集不可に設定する方法: まず HTML サンプル ファイルを作成し、次に入力タグを定義し、CSS スタイル「pointer-events: none;」を入力に追加します。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

css により入力が編集不可になります

CSS スタイルのポインター イベント: なしを入力に追加します

input{
    pointer-events: none;
}

ポインター イベントを使用して要素が編集不可能になるようにしますマウス イベントのターゲットは、要素上のイベント リスナーが決して起動しないことを必ずしも意味するわけではありません。要素の子孫が明示的に pointer-events 属性を指定し、それがマウス イベントのターゲットになることを許可している場合、その要素を指すすべてのイベントは、イベントの伝播中に親要素を介して伝播し、適切な方法でその要素のイベント リスナーをトリガーします。 。もちろん、親要素上にあるが子孫要素上にはない画面上のマウス アクティビティは、親要素と子孫要素によってキャプチャされません (親要素を通過し、その下にある要素をポイントします)。

HTML で入力を編集不可にする

1.input タグにdisabled 属性を追加します

disabled 属性は、input 要素を無効にすることを規定します。disabled な input 要素は無効にすることはできません。編集または無効化できます。コピー、選択できず、フォーカスを取得できず、値はバックグラウンドで受信されません。設定後は文字の色が灰色になります。無効な属性は とともに使用することはできません。

例:

<input type="text" disabled="disabled" />

2. input タグに readonly 属性を追加します

readonly 属性は、入力フィールドが読み取り専用でコピー可能であることを指定します。ただし、ユーザーTab キーを使用して A フィールドに切り替えることができ、フィールドは選択可能であり、フォーカスを受け取ることができ、そのテキストを選択またはコピーできます。渡された値はバックグラウンドで受信されます。読み取り専用属性により、ユーザーは値を変更できません。

readonly 属性は、 または とともに使用できます。

例:

<input type="text" readonly="readonly">

推奨: 「css ビデオ チュートリアル 」

以上がCSSで入力ボックスを編集不可に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。