JavaScriptでtextareaのreadonly属性を取得、設定する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでtextareaのreadonly属性を取得、設定する方法について現役エンジニアが解説しています。テキストエリアは複数行入力できるHTML要素でフォームの部品です。readonly属性は読み込み専用で入力が出来ない設定になります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでtextareaのreadonly属性を取得、設定する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでtextareaのreadonly属性を取得、設定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

textarea(テキストエリア)とは

複数行の文字入力が可能なHTML要素です。テキストエリアの中の文字が長くなるとスクロールできるようになります。

下記のようなやつです。

HTMLのテキストエリアの画像。JavaScriptでreadonly属性を取得したり、設定することが出来ます。

MDNのリファレンスはこちら

readOnly属性とは

テキストエリアの入力欄を読み取り専用にして、入力できなくする際に指定する属性になります。

入力はできませんが、すでに入力されている文字を選択することはできるので文章のコピーのみを許可する場合に使うと便利です。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

readOnly属性を取得する方法

JavaScriptでこの属性を取得するには、下記の2段階で処理を記述します。

  1. テキストエリアのエレメント(HTMLの<textarea>のことだと思ってください)を取得する
  2. 取得したテキストエリアのエレメントに.readOnlyをつける

それでは具体的なソースコードを見てみましょう。

まずはHTMLのテキストエリアのコードは下記のようになっています。3行の文字が入ったテキストエリアがreadonly(読み取り専用)になっているとします。また、Javascriptからのアクセス用にidに「target」という文字をつけてあります。

<textarea id="target" readonly>
1行目
2行目
3行目
</textarea>

次にJavaScriptです。

const target = document.getElementById('target');
console.log(target.readOnly);
//コンソールにtrueと表示

「document.getElementById(‘target’)」にて、先程HTMLのテキストエリアに指定した「target」でテキストエリアを取得しています。

「target.readOnly」にて、readonly属性を取得しています。readonlyになっていればtrue、なっていなければfalseが返ってきます。

なお、JavaScriptで「readOnly」を取得する際はOnlyの「O(オー)」が大文字であることに注意してください。

 

readOnly属性を設定する方法

先ほどと同じようにHTMLのテキストエリアを取得するところまでは同じです。その後にreadOnlyをtrueにすればreadOnly属性が設定され読み取り専用になります。

const target = document.getElementById('target');
target.readOnly = true;

 

まとめ

JavaScriptで「readOnly」が大文字が入ることさえ間違えなければ、他の要素と扱いはさほど変わらないかと思います。

ちなみに全部小文字で「readonly」と書くと「undefined」が返ってきます。「undefined」は平たくいうと、「そのようなものはありません」のような意味です。undefinedが出たらタイプミスをまずは疑ってみてください。

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。