はじめに
textareaの高さが固定の場合、改行していくと前の文章が埋もれていってしまい、かなりUXが悪い。
これを改善するために、Javascriptを導入し、改行に合わせて高さが自動で変わるようにしていく。
意外と一連の流れを記載している記事が少なかったため、かなり殴り書きだが投稿する。ただし、自身が実施した流れのため環境によって要不要がある。
使用環境は以下の通りである。
| No | 項目 | 内容 |
|---|---|---|
| 1 | OS | Mac |
| 2 | Ruby | 2.6.3 |
| 3 | rails | 6.0.4 |
| 4 | turbolinks | 5.2.0 |
| 5 | webpacker | 4.0.7 |
変更前(右のスクロールバーが出る)
完成イメージ（スクロールバーで遡らなくても高さ自体が変わるため見やすい）
ちなみに上のフォームのコードは下記のように実装している。
# @micropostは一覧表示したい投稿データを渡す
<%= form_with(model: @micropost, local: false) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<div class="field">
<%= f.label :title, '投稿タイトル' %>
<%= f.text_field :title, class: 'form-control' %>
# 以下が該当のコード
<%= f.label :content, '投稿文' %>
<%= f.text_area :content %>
</div>
<%= f.submit "Post", class: "btn btn-primary" %>
<% end %>
事前準備
下記のコードを書くことで、全てのページにjavascriptが読み込まれるようになっている。
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
app/javascript/userディレクトリ、app/javascript/user/custom.jsファイルを作成する。
$ mkdir app/javascript/user
$ touch app/javascript/user/custom.js
また、下記のコードを書くことで、app/javascript/user/custom.jsを読み込むことを明示する。
※packの配下にcustom.jsを作らない。
// app/javascript を起点に記載
require ('user/custom')
実装
custom.jsにtextareaの高さ自動調整用のコードを記載する。
// textarea の高さ自動調整
$(function() {
var $textarea = $('#micropost_content');
var lineHeight = parseInt($textarea.css('lineHeight'));
$textarea.on('input', function(e) {
var lines = ($(this).val() + '\n').match(/\n/g).length;
$(this).height(lineHeight * lines);
});
console.log($textarea)
});
もう一度WEBページを開いてみると、改行によって高さが変わるようになった。
ちなみにWEBページの検証ツールでHTMLを見てみると、変更後にはstyleが追加され、改行するたびに数値が大きくなる、
<textarea name="micropost[content]" id="micropost_content"></textarea>
<textarea name="micropost[content]" id="micropost_content" style="height: 178px;"></textarea>
【追記_20220807】一度リロードしないとjsが反応しない
一度リロードしないとjsが反応しない
上記記事で後で発覚したjsが反応しないことの対策を行ったので、参照いただきたい。
簡単に言うと、今回のtext_areaのページに飛ぶリンクタグに"turbolinks" => falseを追加し、turbolinksを殺すことで、jsの関数を発火させることができた。
参考文献