[簡単すぎる]Rails + jQueryで文字数カウント

RailsでjQueryを使う準備

簡単３ステップです。

gemfile

gem "jquery-rails"

/app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs

/app/views/layouts/application.html

<%= javascript_include_tag "application" %>

これだけです。最後のapplication.htmlに関しては元から用意されてるので実質2ステップです。

カウンターを作っていこう

今回は上の画像のように文字数カウンターを作ります。

1.app/assets/javascriptでnew fileを作成します。
この時の命名規則で語尾に.jsと付けてください。
私はform.jsとしました。

2.コードを書いていきます。

_form.html.erb

<%= form_for (@post) do |f| %>
  <div class="post_form">
    <div class="form-group">
      <%= f.label :タイトル %>
      <%= f.text_area :title, class: "form-control", rows: 1 %>
    </div>

    <div class="form-group">
      <%= f.label :本文 %>
      <%= f.text_area :text, class: "form-control", id: "input-text",rows: 4 %>
      <p id="counter">0文字</p>
    </div>

    <div class="form-submit">
      <%= f.submit "投稿する", class: "form-button" %>
    </div>
  </div>
<% end %>

キーとなる大事なものは
input-textとcounterです。

form.js

$(function(){
 $("#input-text").on("keyup", function() {
   let countNum = String($(this).val().length);
   $("#counter").text(countNum + "文字");
 });
});

これで完成です。

form.jsの解説をすると
2行目: 対象となるinput-textセレクタを指定します。

3行目: countNumという変数を定義してここに合計数の処理を代入します。
文字列と数値は合わせれないのでStringを指定します。
ここの(this)は[input-text]を表しており、入力された数を表す。

4行目: 合計値を表示するcounterセレクタに合計数を表すcountNumをツッコミ完成です。