javascript - 如何以 simple_form 实现基本字符计数器？

Question

我的表单使用 simple_form，并且希望在文本字段上启用一些基本的 JS 字符计数。

我的表单部分如下所示:

<%= simple_form_for(@post, html: {class: 'form-horizontal' }) do |f| %> 

    <%= f.error_notification %>

    <%= f.input_field :parent_id, as: :hidden %>

    <div class="field">
    <% if can? :manage, @post %>
            <%= f.input_field :status, label: "Status", collection: Post.statuses.keys, selected: :unconfirmed %>   
    <% end %>       
    </div>

    <%= f.input :title, placeholder: "Enter Title" %>
    <%= f.input :photo %>
        <%= f.input :file %>
    <%= f.input :body %>
        <div class="report-submit">
            <%= f.button :submit %>
        </div>

<% end %>

我该如何去做呢？

Answer 1

为文本字段分配一个id，然后在其旁边添加一个span，您将在其中显示计数器，为该文本字段分配一个id跨度也是如此。

<%= f.input :body, id: "body-field" %>
<span id="body-count">0 characters</span>

在 Javascript 中添加此代码

$("#body-field").on("keyup", function(){
    length = $(this).val().length;
    $("#body-count").html(length);
});

我创建了一个 fiddle 来展示它是如何工作的，请单击此处 http://jsfiddle.net/L99c30qh/