Javascript RubyonRails显示f.text\u区域的剩余字符数

在我的Ruby on Rails应用程序中，我试图在视图中显示以下文本框的剩余字符数：

<%= f.label :review_text, 'Review Text:' %>

其中显示了剩余的金额：

chars left : <span id="counter"><%= maxcounter=2000 %></span>

这不起作用，但此文本字段起作用：

<%= text_field_tag :review_text %>

如果我将上述内容更改为：

<%= f.text_field_tag :review_text %>

我得到以下错误：

NoMethodError in Reviews#new 
undefined method `text_field_tag' for   <ActionView::Helpers::FormBuilder:0x6b44020>

有人能帮忙吗

以下是完整视图：

<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
<div id="contentWrapper">
    <div id="content">
    <div class='large_panel'>
        <table>
            <%= form_for @review do |f| %>
                <%= f.hidden_field :user_id %>
                <%= f.hidden_field :film_id %>
                <%= image_tag "thor_hammer.jpg",:size => "900x250" %>
                <h1>REVIEW <%= @review.film.title %>:</h1>
                <tr>
                    <td width="500px">
                        <%= f.label :review_text, 'Review Text:' %></br>
                    </td>
                </tr>
                <tr>
                    <td>
                        <%= f.text_area :review_text, :size=>"50x10" %></br></br>
                    </td>
                </tr>
                <tr>
                <td width="100px">
                        <%= f.label :no_of_stars, 'Stars:' %></br>
                    </td>
                </tr>
                <tr>
                    <td>
                        <%= f.select :no_of_stars, 1..5 %></br></br>
                    </td>
                </tr>
                <tr>
                    <td>
                    chars left : <span id="counter"><%= maxcounter=2000 %></span>
                    <%= text_field_tag :review_text %>
                        <div class="actions">
                          <%= f.submit 'Submit' %>
                        </div>
                        <div class="actions">
                          <%= link_to 'Back', reviews_path %>
                        </div>
                        </br></br>
                        <%= render "/error_messages", :message_header => "Cannot save: ", :target => @review %> 
                    </td>
                </tr>
            <% end %>
            </table><br>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
  $("#review_text").keyup(function() {
    $("#counter").text(2000 - $(this).val().length);
  });
});
</script>

测试和工作：

查看\u controller.rb：

class ReviewsController < ApplicationController

    def new
        @review = Review.new
        @maximum_length = Review.validators_on( :review_text ).first.options[:maximum]
    end

end

review.rb：

class Review < ActiveRecord::Base

    validates :review_text, length: { maximum: 200 }

end

new.html.erb：

<%= form_for @review do |f| %>

    <%= f.text_field :review_text, maxlength: @maximum_length, id: 'review_text' %>

    Chars left: <span id="counter" data-maximum-length="<%= @maximum_length %>"><%= @maximum_length %></span>

<% end %>


<script>
    $(document).ready(function() {
      var review_text = $("#review_text");
      var counter     = $("#counter");
      var max_length  = counter.data("maximum-length");

      review_text.keyup(function() {
          counter.text(max_length - $(this).val().length);
      });

    });
</script>

测试和工作：

查看\u controller.rb：

class ReviewsController < ApplicationController

    def new
        @review = Review.new
        @maximum_length = Review.validators_on( :review_text ).first.options[:maximum]
    end

end

review.rb：

class Review < ActiveRecord::Base

    validates :review_text, length: { maximum: 200 }

end

new.html.erb：

<%= form_for @review do |f| %>

    <%= f.text_field :review_text, maxlength: @maximum_length, id: 'review_text' %>

    Chars left: <span id="counter" data-maximum-length="<%= @maximum_length %>"><%= @maximum_length %></span>

<% end %>


<script>
    $(document).ready(function() {
      var review_text = $("#review_text");
      var counter     = $("#counter");
      var max_length  = counter.data("maximum-length");

      review_text.keyup(function() {
          counter.text(max_length - $(this).val().length);
      });

    });
</script>

---

接受的答案如前所述工作，但是如果您的文本_字段预先填充了数据，那么当页面加载时，计数器将不包含正确的计数，要解决此问题，请在review_text.keyup上方添加以下行

或者只使用以下更新的脚本：

<script>
$(document).ready(function() {
  var review_text = $("#review_text");
  var counter     = $("#counter");
  var max_length  = counter.data("maximum-length");

  counter.text(max_length - review_text.val().length);
  review_text.keyup(function() {
      counter.text(max_length - $(this).val().length);
  });

});
</script>

---

接受的答案如前所述工作，但是如果您的文本_字段预先填充了数据，那么当页面加载时，计数器将不包含正确的计数，要解决此问题，请在review_text.keyup上方添加以下行

或者只使用以下更新的脚本：

<script>
$(document).ready(function() {
  var review_text = $("#review_text");
  var counter     = $("#counter");
  var max_length  = counter.data("maximum-length");

  counter.text(max_length - review_text.val().length);
  review_text.keyup(function() {
      counter.text(max_length - $(this).val().length);
  });

});
</script>

---

javascript和java不一样：-javascript和java不一样：-这个答案被低估了，这是一个很好的方法。非常感谢你的回答。这个答案被低估了。这是一个很好的方法。非常感谢你