編集できない読み取り専用テキストボックスの作り方

1行入力・複数行入力の切り替えや、ラベル・プレースホルダー・サイズ・色・余白・枠線などを設定して、HTML・CSSを自動生成できます。

編集できないテキストボックスを作成するには、HTMLのreadonly属性やdisabled属性を使用します。どちらも利用者による文字の入力・変更を禁止できますが、フォーカスやフォーム送信時の扱いに違いがあります。また、文字列の選択・コピーについても、ブラウザーによって動作が異なる場合があります。

今回は、読み取り専用のreadonlyを中心に、入力欄を無効化するdisabledとの違いも紹介します。デモでは、それぞれの属性を設定した注文番号のテキストボックスを用意しています。実際にクリックして、文字の編集や選択・コピー、フォーカスの違いを確認できます。

readonlyとdisabledのどちらを設定した場合でも、JavaScriptのvalueプロパティから入力欄の値を取得できます。ただし、フォーム送信時にはreadonlyの値は送信対象になりますが、disabledの値は送信されません。デモでは、それぞれの注文番号について、取得した文字列やデータ型も確認できます。

今回は1行入力のテキストフィールドを使用していますが、複数行入力のテキストエリアにもreadonlyやdisabledを設定できます。テキストエリアへの変更方法や、それぞれの属性の使い分けについては、後半の「ファイル構成と設置方法」で説明します。

デモ

① 読み取り専用（readonly）

注文番号

② 入力禁止（disabled）

注文番号

①の読み取り専用（readonly）は、文字を編集できませんが、文字列の選択・コピーやフォーカスが可能です。②の入力禁止（disabled）は、文字の編集やフォーカスができませんが、ブラウザーによっては文字列を選択・コピーできます。どちらもJavaScriptのvalueプロパティから値を取得できますが、フォーム送信時にはreadonlyの値だけが送信対象になります。

コードをコピーして使おう！

① 読み取り専用（readonly）

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コードの設定 -->
  <meta charset="UTF-8">
  <!-- スマートフォンなどの画面幅に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- ページタイトル -->
  <title>読み取り専用テキストボックス</title>
  <!-- テキストボックスのCSSを読み込む -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- 読み取り専用テキストボックス全体 -->
  <div class="readonly-text-box_container">

    <!-- 入力欄のラベル -->
    <label class="readonly-text-box_label" for="readonly-text-box-order">
      注文番号
    </label>

    <!--
      読み取り専用のテキストフィールド
      readonly属性で文字の編集を禁止します。
      value属性には表示する注文番号を設定します。
      文字列の選択・コピーやJavaScriptによる値の取得は可能です。
    -->
    <input class="readonly-text-box_input" id="readonly-text-box-order" name="order-number" type="text" value="ORDER-20261025-001" readonly="">

  </div>

</body>
</html>

/* =========================================
  テキストボックス全体の横幅
========================================= */

.readonly-text-box_container {
  width: 100%; /* 設置先の横幅に合わせて表示する */
  max-width: 680px; /* 最大横幅。大きくすると全体が横に広がる */
  margin: 40px auto; /* 上下40pxの余白。左右は自動調整して中央に配置する */
  box-sizing: border-box; /* 余白や枠線を横幅に含める */
  font-family: sans-serif; /* テキストボックス全体のフォント */
}

/* =========================================
  テキストボックスのラベル
========================================= */

.readonly-text-box_label {
  display: block; /* ラベルをブロック要素として表示する */
  margin-bottom: 10px; /* 下余白。大きくすると入力欄との間隔が広がる */
  color: #111827; /* ラベルの文字色 */
  font-size: 16px; /* 文字サイズ。大きくすると文字が大きくなる */
  font-weight: 700; /* 文字の太さ */
}

/* =========================================
  読み取り専用テキストボックス
========================================= */

.readonly-text-box_input {
  display: block; /* 入力欄をブロック要素として表示する */
  width: 100%; /* 親要素の横幅いっぱいに広げる */
  padding: 16px; /* 内側の余白。大きくすると入力欄が広がる */
  border: 2px solid #dbe5f1; /* 枠線。2pxを大きくすると太くなる */
  border-radius: 12px; /* 角丸。大きくすると丸みが強くなる */
  background: #e2e8f0; /* 読み取り専用の入力欄の背景色 */
  color: #334155; /* 入力欄の文字色 */
  font-family: inherit; /* 親要素のフォントを引き継ぐ */
  font-size: 16px; /* 文字サイズ。大きくすると文字が大きくなる */
  line-height: 1.5; /* 行の高さ */
  box-sizing: border-box; /* 枠線と余白を横幅に含める */
  cursor: text; /* 文字列を選択できることを示すカーソル */
}

/* =========================================
  フォーカス時の表示
========================================= */

.readonly-text-box_input:focus {
  border-color: #2563eb; /* フォーカス時の枠線色 */
  outline: 3px solid rgba(37, 99, 235, 0.18); /* 外側の線。3pxを大きくすると太くなる */
}

/* =========================================
  スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 画面幅640px以下のテキストボックス */
  .readonly-text-box_input {
    padding: 14px; /* 内側の余白。小さな画面では余白を少なくする */
  }

}

② 入力禁止（disabled）

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コードの設定 -->
  <meta charset="UTF-8">
  <!-- スマートフォンなどの画面幅に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- ページタイトル -->
  <title>入力禁止テキストボックス</title>
  <!-- テキストボックスのCSSを読み込む -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- 入力禁止テキストボックス全体 -->
  <div class="readonly-text-box_container">

    <!-- 入力欄のラベル -->
    <label class="readonly-text-box_label" for="readonly-text-box-disabled">
      注文番号
    </label>

    <!--
      入力禁止のテキストフィールド
      disabled属性で入力欄を無効化します。
      value属性には表示する注文番号を設定します。
      文字の編集やフォーカスはできません。
      ブラウザーによっては文字列の選択・コピーが可能です。
      JavaScriptによる値の取得は可能です。
      フォーム送信時には、この入力欄の値は送信されません。
    -->
    <input class="readonly-text-box_input" id="readonly-text-box-disabled" name="disabled-order-number" type="text" value="ORDER-20261025-002" disabled="">

  </div>

</body>
</html>

/* =========================================
  テキストボックス全体の横幅
========================================= */

.readonly-text-box_container {
  width: 100%; /* 設置先の横幅に合わせて表示する */
  max-width: 680px; /* 最大横幅。大きくすると全体が横に広がる */
  margin: 40px auto; /* 上下40pxの余白。左右は自動調整して中央に配置する */
  box-sizing: border-box; /* 余白や枠線を横幅に含める */
  font-family: sans-serif; /* テキストボックス全体のフォント */
}

/* =========================================
  テキストボックスのラベル
========================================= */

.readonly-text-box_label {
  display: block; /* ラベルをブロック要素として表示する */
  margin-bottom: 10px; /* 下余白。大きくすると入力欄との間隔が広がる */
  color: #111827; /* ラベルの文字色 */
  font-size: 16px; /* 文字サイズ。大きくすると文字が大きくなる */
  font-weight: 700; /* 文字の太さ */
}

/* =========================================
  入力禁止テキストボックス
========================================= */

.readonly-text-box_input {
  display: block; /* 入力欄をブロック要素として表示する */
  width: 100%; /* 親要素の横幅いっぱいに広げる */
  padding: 16px; /* 内側の余白。大きくすると入力欄が広がる */
  border: 2px solid #dbe5f1; /* 枠線。2pxを大きくすると太くなる */
  border-radius: 12px; /* 角丸。大きくすると丸みが強くなる */
  background: #e5e7eb; /* 入力禁止の入力欄の背景色 */
  color: #94a3b8; /* 入力禁止の文字色 */
  font-family: inherit; /* 親要素のフォントを引き継ぐ */
  font-size: 16px; /* 文字サイズ。大きくすると文字が大きくなる */
  line-height: 1.5; /* 行の高さ */
  box-sizing: border-box; /* 枠線と余白を横幅に含める */
  cursor: not-allowed; /* 操作できないことを示すカーソル */
  opacity: 1; /* ブラウザー標準の透明度を解除する */
}

/* =========================================
  スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 画面幅640px以下のテキストボックス */
  .readonly-text-box_input {
    padding: 14px; /* 内側の余白。小さな画面では余白を少なくする */
  }

}

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

今回のサンプルは、HTMLとCSSの2つのファイルで構成されています。①はreadonly属性を使った読み取り専用のテキストボックス、②はdisabled属性を使った入力禁止のテキストボックスです。どちらもJavaScriptを使用せず、HTMLの属性だけで文字の編集を禁止できます。

①と②はそれぞれ独立したサンプルとしてダウンロードできます。ファイル構成は共通ですが、index.htmlに設定する属性と、style.cssで指定する背景色・文字色・カーソル表示が異なります。

sample/
  ├── index.html
  └── style.css

各ファイルの役割
index.htmlには、注文番号を表示するinput要素と、項目名を示すlabel要素を記述しています。①ではreadonly属性、②ではdisabled属性を設定しています。style.cssでは、入力欄の横幅・余白・枠線・角丸・文字サイズなどを設定しています。①にはフォーカス時の表示、②には無効化された状態を示す配色とカーソルも設定しています。

設置方法・使い方
使用したいタイプの「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.htmlとstyle.cssを同じ階層に配置し、index.htmlをブラウザで開くとテキストボックスが表示されます。
①は注文番号をクリックして文字列を選択・コピーできますが、文字の追加や削除はできません。②は入力欄が無効化され、マウスやキーボードでフォーカスできません。ただし、ブラウザによっては文字列を選択・コピーできる場合があります。

読み取り専用にする方法（readonly）
①のサンプルでは、input要素にreadonly属性を設定しています。次のコードは、注文番号を表示する読み取り専用のテキストボックスです。

<!-- 読み取り専用のテキストフィールド -->
<input class="readonly-text-box_input" id="readonly-text-box-order" name="order-number" type="text" value="ORDER-20261025-001" readonly="">

readonly属性を設定すると、利用者は入力欄の文字を追加・変更・削除できなくなります。ただし、フォーカスや文字列の選択・コピーは可能です。フォーム内に設置した場合は、name属性で指定した名前と入力欄の値が送信対象になります。
表示する注文番号は、value="ORDER-20261025-001"の文字列を変更することで設定できます。読み取り専用を解除したい場合は、readonly=""を削除してください。

入力欄を無効化する方法（disabled）
②のサンプルでは、readonlyの代わりにdisabled属性を設定しています。次のコードは、注文番号を表示する入力禁止のテキストボックスです。

<!-- 入力禁止のテキストフィールド -->
<input class="readonly-text-box_input" id="readonly-text-box-disabled" name="disabled-order-number" type="text" value="ORDER-20261025-002" disabled="">

disabled属性を設定すると、入力欄が無効化され、文字の編集やフォーカスができなくなります。ただし、文字列の選択・コピーまで必ず禁止されるわけではなく、ブラウザによって動作が異なります。
readonlyとの大きな違いは、フォーム送信時の扱いです。readonlyを設定した入力欄の値は送信対象になりますが、disabledを設定した入力欄の値は送信されません。注文番号などを編集させずに送信したい場合はreadonly、入力欄自体を無効化したい場合はdisabledを使用します。
表示する注文番号はvalue属性で変更できます。入力禁止を解除したい場合は、disabled=""を削除してください。

テキストボックスの値を取得する方法
readonlyとdisabledのどちらを設定した場合でも、JavaScriptのvalueプロパティから値を取得できます。①のサンプルでは、HTMLに設定したid="readonly-text-box-order"を使用して対象の入力欄を取得します。
次のコードは値の取得方法を説明するための例であり、ダウンロードするZIPには含まれていません。

// 読み取り専用テキストボックスの要素を取得
const orderInput = document.getElementById("readonly-text-box-order");

// 注文番号を変数へ代入
const orderNumber = orderInput.value;

document.getElementById()で入力欄を取得し、orderInput.valueを変数orderNumberへ代入しています。取得される値は文字列です。このサンプルでは、orderNumberに"ORDER-20261025-001"が入ります。
②のサンプルから値を取得する場合は、getElementById()に指定するIDをreadonly-text-box-disabledへ変更してください。disabled属性が設定されていても、JavaScriptから値を取得できます。

上記のコードは実行した時点の値を取得します。取得した値をブラウザの開発者ツールで確認したい場合は、次のようにconsole.log()を使用します。

// 読み取り専用テキストボックスの値を取得して表示
console.log(document.getElementById("readonly-text-box-order").value);

// 入力禁止テキストボックスの値を取得して表示
console.log(document.getElementById("readonly-text-box-disabled").value);

①ではORDER-20261025-001、②ではORDER-20261025-002がコンソールに表示されます。取得した値は、別の要素への表示や条件分岐などに利用できます。
このJavaScriptは値の取得方法を説明するための追加例であり、テキストボックスを読み取り専用・入力禁止にするためには必要ありません。

テキストエリアを読み取り専用にする方法
複数行の文章を表示したい場合は、input要素の代わりにtextarea要素を使用します。テキストエリアにもreadonly属性を設定できるため、改行を含む文章を編集できない状態で表示できます。

<!-- 読み取り専用のテキストエリア -->
<textarea class="readonly-text-box_input" id="readonly-text-box-message" name="message" readonly="">お問い合わせ内容を確認してください。
この文章は編集できません。</textarea>

textareaでは、表示する文章を開始タグと終了タグの間に記述します。input要素とは異なり、初期表示する文章をvalue属性に設定する必要はありません。
JavaScriptから文章を取得する場合は、テキストフィールドと同じくvalueプロパティを使用します。入力禁止のテキストエリアに変更したい場合は、readonly=""をdisabled=""へ置き換えてください。
なお、テキストエリアの高さを指定したい場合は、CSSにmin-heightなどを追加して調整します。

テキストボックスのデザインを調整する方法
style.cssの.readonly-text-box_inputでは、入力欄の内側余白・枠線・角丸・背景色・文字サイズなどを設定しています。①のサンプルでは、次のCSSを使用しています。

/* =========================================
  読み取り専用テキストボックス
========================================= */

.readonly-text-box_input {
  display: block; /* 入力欄をブロック要素として表示する */
  width: 100%; /* 親要素の横幅いっぱいに広げる */
  padding: 16px; /* 内側の余白。大きくすると入力欄が広がる */
  border: 2px solid #dbe5f1; /* 枠線。2pxを大きくすると太くなる */
  border-radius: 12px; /* 角丸。大きくすると丸みが強くなる */
  background: #e2e8f0; /* 読み取り専用の入力欄の背景色 */
  color: #334155; /* 入力欄の文字色 */
  font-family: inherit; /* 親要素のフォントを引き継ぐ */
  font-size: 16px; /* 文字サイズ。大きくすると文字が大きくなる */
  line-height: 1.5; /* 行の高さ */
  box-sizing: border-box; /* 枠線と余白を横幅に含める */
  cursor: text; /* 文字列を選択できることを示すカーソル */
}

padding: 16px;を大きくすると入力欄の内側余白が広がり、小さくするとコンパクトになります。border: 2px solid #dbe5f1;では枠線の太さと色を指定しており、2pxを変更すると枠線の太さを調整できます。border-radius: 12px;を大きくすると角の丸みが強くなります。
backgroundは入力欄の背景色、colorは文字色です。①では文字を読みやすい配色にし、②では無効化された状態が分かるように薄い文字色を設定しています。

①のサンプルでは、入力欄をクリックしたときの表示もCSSで設定しています。:focusを使用すると、フォーカスされた入力欄の枠線や外側の線を変更できます。

/* =========================================
  フォーカス時の表示
========================================= */

.readonly-text-box_input:focus {
  border-color: #2563eb; /* フォーカス時の枠線色 */
  outline: 3px solid rgba(37, 99, 235, 0.18); /* 外側の線。3pxを大きくすると太くなる */
}

border-colorはフォーカス時の枠線色、outlineは入力欄の外側に表示する線です。outlineの3pxを変更すると線の太さを調整できます。
②のdisabledを設定した入力欄はフォーカスできないため、このフォーカス時の表示は使用していません。

レスポンシブ対応
style.cssでは、親要素の.readonly-text-box_containerにwidth: 100%;とmax-width: 680px;を設定し、テキストボックス全体の最大横幅を680pxに制限しています。margin: 40px auto;で中央に配置し、上下に40pxの余白を設けています。max-widthを変更すると最大横幅を調整できます。
さらに、画面幅が640px以下の場合は、次のメディアクエリで入力欄の内側余白を調整しています。

/* =========================================
  スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 画面幅640px以下のテキストボックス */
  .readonly-text-box_input {
    padding: 14px; /* 内側の余白。小さな画面では余白を少なくする */
  }

}

PCなどの広い画面では内側余白を16pxに設定し、画面幅が640px以下になると14pxに変更します。これにより、スマートフォンでは入力欄を少しコンパクトに表示できます。
入力欄にはwidth: 100%;とbox-sizing: border-box;を設定しているため、枠線や内側余白を含めて親要素の横幅に合わせて表示されます。①と②のどちらも同じ方法でレスポンシブ対応しています。