ywork2020.com

Title

リードオンリー属性を使えば、入力要素の値を読み取り専用にできる

readonly属性の概要

readonly属性は入力要素であるinput要素とtextarea要素を読み取り専用にするための属性です。 この属性を適用された要素は読み取り専用となり、閲覧ユーザーはテキストの変更ができなくなりますが、 テキストの選択とフォーカスの取得は可能です。
尚、readonly属性が有効であっても、javascriptからの処理はできます。

この属性はBoolean型(論理型)ですのでHTMLのコードとして記述する場合は属性を付与することで有効となり、属性を削除することで無効となります。

この属性に類似した属性としてdisabled属性がありますが、disabled属性は入力要素を無効化するのでテキストの選択やフォーカスの取得もできません。

実機サンプルとサンプルコード

ここでは3つのサンプルを用意しました。readonly属性の有無の違いと類似属性であるdisabled属性の振る舞いの違いも 実際のサンプルに触れて確認してみてください。

readonly属性無しの場合

コード: <input type="text" value="サンプルテキスト1">

普通のテキスト型の入力要素です。入力や編集が行えます。

readonly属性有りの場合

コード: <input type="text" value="サンプルテキスト2" readonly>

読み取り専用の入力要素です。テキストの選択などはできますが、編集できません。

readonly属性との比較対象としてdisabled属性を使った場合

コード: <input type="text" value="サンプルテキスト3" disabled>

入力要素が無効化されていますのでテキストを選択することもできません。