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

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

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

 

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

 

 

textarea（テキストエリア）とは

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

下記のようなやつです。

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

readOnly属性とは

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

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

[PR] フロントエンドで挫折しない学習方法を動画で公開中

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では、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

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