3
1

More than 3 years have passed since last update.

【form_with】text_areaの入力内容の「改行」を反映させる

Last updated at Posted at 2021-02-08

はじめに

form_withを使って送信フォームを実装し、入力内容に改行を入れても、改行は反映されない。

(簡易的なメモアプリを例とする)

new.html.erb
〜省略〜
<%= form_with model: @memo, local: true do |f| %>
<%= f.text_area :title, placeholder:"メモのタイトルを入力する" %>
<%= f.submit "記録する" %>
<% end %>
〜省略〜
show.html.erb
〜省略〜
<% @memos.each do |memo| %>
  <ul>
    <li>
      <% memo.title%>
    </li>
  </ul>
〜省略〜

・投稿作成画面の表示
image.png

↓ フォームの内容を送信すると「改行」が反映されていない。

・投稿画面の表示
image.png

記事の内容

form_withで送信するフォーム内の「改行」を反映させる。

(改行版)投稿画面の表示
image.png

改行を反映させる方法

show.html.erbの
<% memo.title%>

<%= safe_join(memo.title.split("\n"),tag(:br)) %>
と書き換える。

show.html.erb
〜省略〜
<% @memos.each do |memo| %>
  <ul>
    <li>
      <%= safe_join(memo.title.split("\n"),tag(:br)) %>
    </li>
  </ul>
<% end %>
〜省略〜

コードの意味

・split("\n")で改行コードを取得
・tag(:br))でbrタグに変更

3
1
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
3
1