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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

監修してくれたメンター

永井浩平

BtoBtoC事業を行っている会社で社内SEとして勤務。
バックエンド、フロント、クラウドなど幅広く業務を行う。
テックアカデミーでは、フロントエンドコース / Javaコースのメンター。

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

目次

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします!

 

はじめに

今回は入力欄を読み取り専用(readonly)にする方法を、inputタグに似たtextareaというHTML要素を使って説明していきます。

読み取り専用(readonly)は入力フォームの最終の確認画面などで使われることがあります。

ぜひこちらの記事の内容を学習し、入力フォームの確認画面などに実装してみてくださいね。

 

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

複数行の文字入力が可能なHTML要素です。

テキストエリアの中の文字が長くなるとスクロールできるようになります。

利用規約など、たくさんの文字列を表示する必要があるときなどに利用されます。

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

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

 

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

readonly属性とは

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

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

 

readonly属性を設定する方法

以下のHTMLを準備します。

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <textarea id="target" col="10" rows="7">
        1行目
        2行目
        3行目
        4行目
        5行目
        6行目
        7行目
        8行目
        </textarea>
    </body>
</html>

 

textareaのcolは横幅を、rowsは行数を指定しています。

今回は行数が7行の指定のため、表示しきれない部分はスクロールすることで表示できます。

また、inputタグと同様に、以下のように文字列を入力できます。

 

readonly属性の指定

readonly属性の指定は、以下のようにreadonlyと属性を記述することで設定が可能です。

<textarea id="target" col="10" rows="5" readonly style="background-color:;">

 

入力エリアをクリックしても、入力できないことが確認できたかと思います。

またユーザーが入力できないと視覚的に分かるよう、背景色をグレーなどに設定する場合もあります。

JavaScriptから設定する方法

JavaScriptでHTML要素にreadonly属性を設定する方法も紹介します。

一度入力した値を変更させたくない場合など、Single Page Applicationを実装する際に利用することがあります。

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

HTMLではreadonlyでしたが、JavaScriptではreadOnlyと一部大文字となることに注意しましょう。

 

まとめ

今回はtextareaにreadonly属性を指定することで、選択のみ可能なスクロールできるテキストエリアの表示に関して説明しました。

inputタグでも同様に、readonly属性を指定できますので、Webサイトなどを作成する際に変更させたくない項目などがあれば活用してみましょう。

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか?

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!