JavaScriptでtextareaに改行を入れる方法を現役エンジニアが解説【初心者向け】

JavaScriptでtextareaに改行を入れる方法について解説します。これができるようになると複数行に渡る内容を入力することができます。ぜひ参考にしてみてください。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

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

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

 

 

 

textareaとは

textarea とは、複数行のテキストを入力できるHTMLタグです。

inputタグでもテキスト入力は可能ですが、textareaでは前述の通り、改行を使って複数行に渡る内容を入力することができます。

<input type="text" value="1行">

<textarea>
複数行に
渡って
内容を入力
</textarea>

 

JavaScriptでtextareaに改行を入れる方法

textarea に改行を入れる方法の前に、JavaScriptでinput タグの値を設定する方法を確認しておきましょう。JavaScriptでinputの値を設定するには、querySelectorやgetElementByIdなどで要素を取得後に、valueプロパティを使います。

// <input id="text" type="text"> の値を設定する
let input = document.getElementById('text');
input.value = 'my input';

textarea に対しても同じ流れで設定できます。

// <textarea id="textarea"> の値を設定する
let textarea = document.getElementById('textarea');
textarea.value = 'my text';

textareaに値を設定する方法が分かったので、次に「改行」について説明します。改行を入れるには「改行コード」と呼ばれる、特殊な文字を使います。バックスラッシュ(\)と小文字nとを組み合わせた\nが改行コードです。

ここまでを踏まえて、textareaに改行を入れる(改行を含む内容を入力する)には、次のようなJavaScriptを用います。

// <textarea id="textarea"> の値を設定する
let textarea = document.getElementById('textarea');
textarea.value = 'こんにちは\n今日は\n良い天気ですね';

上のスクリプトが実行されると、以下の内容がtextareaに設定されます。

こんにちは
今日は
良い天気ですね

また、別の方法としてバッククォート(`)を使うことでも、改行を含む内容を設定できます。

// <textarea id="textarea"> の値を設定する
let textarea = document.getElementById('textarea');
textarea.value = `こんにちは
今日は
良い天気ですね;`

ただし、インデントが崩れて見づらくなるため、使い所には注意が必要でしょう。

[PR] フロントエンドで副業する学習方法を動画で公開中

実際に書いてみよう

以下の textarea に対して、改行を含む内容を設定してみましょう。

<textarea id="test"></textarea>

まずは textarea要素を取得しましょう。

let textarea = document.getElementById('test');

続いて、textareaに値を設定してみましょう。

textarea.value = 'Hello\nmy\nworld';

これで改行ありの内容が設定できたかと思います。他にも色々と設定して試してみてください。

筆者プロフィール

メンター稲員さん フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。 経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript、Node.js。おうち大好きマンです。

 

 

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

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。