inputのdisabled属性とreadonly属性で入力欄を入力不可にする

よくコードに関するお問い合わせを頂くので、webエンジニアに人気のslackでゆるコミュを作りました。
コードに関する質問はゆるコミュでお願いします。ゆるコミュの参加・質問は無料です。

HTML / css / laravel / Django / wordpress / shopify / php / python / javascript / jQuery / React / AWS など初心者から中級者の質問を中心にお答え致します。

メンターとしての参加も大歓迎です。

この記事ではフォームのinputの入力欄を入力不可にする方法をご紹介します。

inputの入力欄を入力不可は次の2つあります。

  • disabled 属性
  • readonly 属性

これらを付与するとユーザーは入力欄に値を入力・変更することができなくなります。

しかし、disabled属性とreadonly属性には次の項目で違いがあります。

  • フォーカス
  • タブ移動
  • value値の送信
  • サポートする要素

これらの違いを理解して、disabled属性とreadonly属性を使い分ける必要があります。

これらの違いを踏まえつつ、disabled属性とreadonly属性の使い方を説明します。

HTMLやjavascriptで入力欄を入力不可にできますが、デバグツールなどを使うと簡単に制御をくぐり抜けることができます。

送信された入力値が正しい数字であるかサーバー側で検証する必要があります。

目次

disabled 属性 と readonly 属性の違い

input要素にdisabled属性とreadonly属性のどちらを付与してもユーザーは値を変更することができなくなります。

しかし、disabled属性とreadonly属性には次のように違いがあります。

スクロールできます
disabled属性readonly属性
フォーカス
タブ移動
value値の送信
サポートする要素BUTTON / INPUT / OPTGROUP / OPTION / SELECT / TEXTAREAINPUT / TEXTAREA
ブラウザのサポートGoogle Chrome / Edge / Firefox / safari / operaGoogle Chrome / Edge / Firefox / safari / opera
disabled 属性 と readonly 属性の違い

「規制」という意味ではdisabled属性の方が強く、付与できる要素はdisabled属性の方が多いです。
disabled属性は「選択不能指定」で、readonly属性は「読み出し専用指定」となっています。

disabled属性とreadonly属性の挙動の違いは次のテキストボックスで確認できます。

disabled 属性

readonly 属性

disabled属性を使って「選択不能指定」で入力を規制する

「選択不能指定」で入力を規制する場合はdisable属性を以下のように使って規制します。

<input
 name="a"
 type="text"
 value="disable属性で入力規制"
 disabled
/>

disabled属性は値を指定しなくても「選択不能指定」することができます。
disabled="disabled"のようにしても問題ありません。

The disabled attribute is a boolean attribute.

disabled属性はboolean属性です。

HTML <input> disabled Attribute

disabled属性は以下のような特徴があります。

スクロールできます
disable属性
フォーカス
タブ移動
value値の送信
サポートする要素BUTTON / INPUT / OPTGROUP / OPTION / SELECT / TEXTAREA
disable属性の特徴

javascriptで動的にdisabled属性を付与して入力規制する

「動物は好きですか?」のチェックボックスにチェックをすると、セレクトボックスで動物を選べるようになります。

javascriptではdisabled属性にbooleanを入れています。

<label>
  動物は好きですか?
  <input id="js-like-animals" type="checkbox"/>
</label>
<br>
<label for="js-animal-select">好きな動物:</label>
<select id="js-animal-select" disabled>
  <option value="dog">いぬ</option>
  <option value="cat">ねこ</option>
  <option value="sheep">ひつじ</option>
  <option value="tiger">とら</option>
</select>

<script>
  var likeAnimalsCheckbox = document.getElementById("js-like-animals");
  var animalSelect = document.getElementById("js-animal-select");
  
  likeAnimalsCheckbox.addEventListener("change", function(event) {
    if (event.target.checked) {
  animalSelect.disabled = false;
    } else {
  animalSelect.disabled = true;
    }
  }, false);
</script>

jQueryで動的にdisabled属性を付与して入力規制する

jQueryではattrまたはpropを使ってdisabled属性を付与したり外したりします。

<label>
    動物は好きですか?
    <input id="jq-like-animals" type="checkbox"/>
</label>
<br>
<label for="animal-select">好きな動物:</label>
<select id="jq-animal-select" disabled>
  <option value="dog">いぬ</option>
  <option value="cat">ねこ</option>
  <option value="sheep">ひつじ</option>
  <option value="tiger">とら</option>
</select>

<script>
  var likeAnimalsCheckbox = jQuery('#jq-like-animals');
  var animalSelect = jQuery("#jq-animal-select");
  
  likeAnimalsCheckbox.change(function(event) {
  if (event.target.checked) {
    animalSelect.attr('disabled', false);
    # animalSelect.prop("disabled", false);
  } else {
    animalSelect.attr('disabled', true);
    # animalSelect.prop("disabled", true);
  }
  }, false);
</script>

jQueryでフォームのボタンを有効・無効にするではそれぞれのメソッドの操作方法を詳しく紹介しています。

readonly属性を使って「読み出し専用指定」で入力を規制する

「読み出し専用指定」で入力を規制する場合はdisable属性を以下のように使って規制します。

<input
 name="a"
 type="text"
 value="readonly属性で入力規制"
 readonly
/>

readonly属性は値を指定しなくても「読み出し専用指定」することができます。
readonly="readonly"のようにしても問題ありません。

The readonly attribute is a boolean attribute.

readonly属性はboolean属性です。

HTML <input> readonly Attribute

readonly属性を指定して「読み出し専用指定」をすると入力フィールドを変更することはできませんが、ユーザーはクリックしてフォーカスすることができるため、値をコピーすることができます。

readonly属性は以下のような特徴があります。

スクロールできます
readonly属性
フォーカス
タブ移動
value値の送信
サポートする要素INPUT / TEXTAREA
readonly属性の特徴

まとめ

input要素にdisabled属性とreadonly属性のどちらを付与してもユーザーは値を変更することができなくなりますが、次のような違いがあります。

スクロールできます
disabled属性readonly属性
フォーカス
タブ移動
value値の送信
サポートする要素BUTTON / INPUT / OPTGROUP / OPTION / SELECT / TEXTAREAINPUT / TEXTAREA
ブラウザのサポートGoogle Chrome / Edge / Firefox / safari / operaGoogle Chrome / Edge / Firefox / safari / opera
disabled 属性 と readonly 属性の違い

input要素にdisabled属性やreadonly属性を付与する場合はこれらの特徴をよく理解して取り扱う必要がありますが、一つ一つの確認しながら作っていくととても時間がかかります。

そこでメンターや講師がいるとても助けになってくれるので、おすすめのプログラミングスクールを置いておきます。

よくコードに関するお問い合わせを頂くので、webエンジニアに人気のslackでゆるコミュを作りました。
コードに関する質問はゆるコミュでお願いします。ゆるコミュの参加・質問は無料です。

HTML / css / laravel / Django / wordpress / shopify / php / python / javascript / jQuery / React / AWS など初心者から中級者の質問を中心にお答え致します。

メンターとしての参加も大歓迎です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

エンジニアを目指す方必見!おすすめプログラミングスクール

最短でエンジニアになるには、いかに効率よく学習するかが重要です。モチベーションを維持しながら最短でエンジニアを目指すならプログラミングスクールを利用するのもおすすめです。

コメント

コメントする

目次
閉じる