10
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

rails text_areaで改行入力→そのまま表示させる。

Last updated at Posted at 2020-12-17

ぶっちゃけこちらの記事参照しただけです笑
https://qiita.com/kamotetu/items/1aa94994985c720668e4

form_forやform_withで
テキスト入力時に改行→全然できてなーい!
ってなりました。
ちゃんとそのまま表示させたいなと。

#問題
入力フォーム

new.html.erb
<div class="from-group mb-4">
   <%= f.label :introduction, "紹介文", class: "form-label" %><br />
   <%=f.text_area :introduction, class: "form-control", id:"user-introduction", size: "90x5", maxlength: "1000", placeholder: "紹介文を書く"%>
</div>

投稿を入力
スクリーンショット 2020-12-17 21.16.32.png
表示

show.html.erb
<%=@user.introduction%>

そうすると
スクリーンショット 2020-12-17 21.39.24.png
改行できてない。
これを解決したいということ。

#解決法

show.html.erb
<%=safe_join(@user.introduction.split("\n"),tag(:br))%>

に変えてあげるだけで
スクリーンショット 2020-12-17 21.45.02.png
うまくいった!

 
この記述は

  • 連続した改行(空白のままの改行)
  • 段落(スペースキーで1文字分の空白を作る)

といったことが可能になります。

ちなみに

入力ホームにバリデーションかけてない際、空白で送信した場合エラーになりました。
そんな時は

show.html.erb
<%if @user.introduction.nil? %>   # 紹介文が「空」のままだとエラーが出るのでnil?=trueの時を追加
  <%=@user.introduction%>       # バリデーションは無し 
<% else %>
  <%=safe_join(@user.introduction.split("\n"),tag(:br))%>    # 紹介文が「空」じゃない時は正常に反映する
<%end %>

で解決しました。

10
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?