HTML でフォーム入力やその他のテキストボックスを読み取り専用にして編集不可にする方法

場合によっては、フォーム内のテキストボックスを読み取り専用にして、ユーザーがその中の情報を変更できないようにする必要があります。たとえば、<input type="text" name="input1" value="中国"> のコンテンツでは、「中国」という単語を変更できません。要約すると、それを実装する方法はいくつかあります。

方法1: onfocus=this.blur()はマウスを置くことができないときにフォーカスを失います
<input type="text" name="input1" value="中国" onfocus=this.blur()>

方法2: 読み取り専用
<input type="text" name="input1" value="中国" 読み取り専用>
<input type="text" name="input1" value="中国" readonly="true">

方法3: 無効
<input type="text" name="input1" value="中国" disabled="true">

完全な例:

<input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456789" disabled="true" readOnly="true" />

disabled="true"このオプションを有効にすると、テキストは灰色になり、編集できなくなります。
readOnly="true" のテキストは色が変わらず、編集できません

CSS シールド入力: <input style="ime-mode: disabled">

方法は 2 つあります。1 つ目は disabled="disabled" です。この定義の後、無効な入力要素は使用できず、クリックもできなくなります。 2 番目: readonly="readonly" 読み取り専用フィールドは変更できません。ただし、ユーザーは引き続き Tab キーを使用してフィールドに切り替え、そのテキストを選択またはコピーできます。

<<: TortoiseSvn Little Turtle インストール最新の詳細なグラフィックチュートリアル

>>: デザイン理論: デザインにおける階層