1. ホーム
  2. Web制作
  3. HTML/Xhtml

inputなどのHTMLテキストボックスは、読み取り専用で編集できない

2022-02-06 15:40:54
フォームのテキストボックスを読み取り専用にして、ユーザーが中の情報を変更できないようにしたい場合があります。例えば、<input type="text" name="input1" value="China"> の内容を "China" 2文字にして変更できないようにすることができます。実装をまとめると、以下のようになります。
方法1:onfocus=this.blur() マウスが置かれていない時に、フォーカスを残す。
<input type="text" name="input1" value="China" onfocus=this.blur()>
方法2:読み取り専用
<input type="text" name="input1" value="China" readonly>
<input type="text" name="input1" value="China" readonly="true">
方法3:使用不可
<input type="text" name="input1" value="China" 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つの方法があります。 まず、disabled="disabled"で、無効な入力要素を定義した後は、利用もクリックもできないようにします。2つ目:readonly="readonly"読み取り専用フィールドは変更できません。しかし、ユーザはTabキーを使ってそのフィールドに移動したり、そのテキストを選択したりコピーしたりすることができます。