textareaの文章で改行されない場合の対処法を解説!

HTMLタグであるtextareaの文章で改行されない場合の対処法を解説します。これはHTML内のtextareaに改行した文章を書いて、それをどこかに反映させたい時、改行したはずがされていないという問題です。この解決方法をCSSを用いて解説していきます。

コンテンツ [表示]

  1. 1textareaの文章が改行されない問題
  2. 2textareaの文章で改行されない場合の対処法
  3. 2.1CSSで改行を反映させる方法
  4. 2.2JavaScriptで改行を反映させる方法
  5. 3まとめ

textareaの文章が改行されない問題

HTML内のtextareaに文章を書いてそれをどこかに反映させたいと思うことがあります。

そんな時にただHTMLのtextareaの要素に当たる部分に改行を用いて文章を書いても、改行が反映されません。

実際にサンプルコードを用いて見てみましょう。この際textarea内に改行を用いた文章を書いて確認してみてください。

下にtextareaで書いた文字が反映されます。

このようにtextarea内で改行を用いて書いた文字が、改行されずにその下のdivタグ内で反映されていることが分かります。

textareaの文章で改行されない場合の対処法

それではtextarea内で書いた文章をどこかに反映させる際、改行も反映させるにはどうしたらいいでしょうか。

それには2つのパターンがあるのでそれぞれ見てみましょう。

CSSで改行を反映させる方法

まずCSSで改行を反映させる方法を解説します。

その方法とは、反映させたい部分にCSSで white-space: pre-wrap;を設定させてあげます。

それでは先ほどのサンプルコードの反映させたい部分(divタグ)にCSSを設定したものがどのような挙動になっているのか見てみましょう。

先ほどと同じく改行した文章をtestarea内に書いて、確認ボタンを押してください。

このようにtextareaで書いた改行された文章が、そのままdivタグの要素として渡ってきていることが分かります。

JavaScriptで改行を反映させる方法

次にJavaScriptで改行を反映させる方法について改行コードなどを用いて解説します。

textareaで改行ありの文章を書くと、改行の部分で改行コードである\nがブラウザ上では見えませんが、存在しています。これをうまく活用してあげます。

それではその方法としてはsplitメソッドを用いて改行コードである\nで区切り、配列として文字を取り出します。そしてその配列として取り出した文字ごとの後ろにjoinメソッドを用いてbrタグを付け加えてあげます。

これで改行が反映されるようになります。

では実際にサンプルコードで確認、さらに今までと同様にtextareaに改行した文章を書いて、確認ボタンを押し、挙動を確認してみましょう。

このようにtextareaで書いた改行された文字が、divタグ内でも改行されて反映されていることが分かります。

まとめ

いかがでしたでしょうか?

ここで得た情報は開発を進めていく上で必ず役立ちます。

最後のJavaScriptで改行を反映させる方法は少し応用的です。
実際に自分でもサンプルコードを見ながら、真似してコードを書き、ここで挙げた対処法を身に付けておきましょう。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次