Question

现在我的计数器显然总是从350开始。我希望它使用正确的数字，但我不确定如何在ruby语法中调用'left'js var。

<%= form_for [@status], :url => user_status_path(current_user) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
  <div class="field">
    <%= f.text_area :content, id:"status_box", maxlength:350, placeholder: "Status?" %>
  </div>
  <%= f.submit "Update", id:"status_btn", class: "btn btn-small btn-primary" %>

  <span id="counter">Characters left: 350</span>

  <script type="text/javascript">
    $('#status_box').keyup(function () {
        var left = 350 - $(this).val().length;
        if (left < 0) {
            left = 0;
        }
        $('#counter').text('Characters left: ' + left);
    });
  </script>
<% end %>

当人们按下按键时，我怎么能这样做呢？

Answer 1

您需要动态更改ERB中剩余的字符数，如下所示：

<span id="counter">Characters left: <%= 350 - @status.content.length %></span>

当有人按住键时要触发，请尝试绑定keypress事件而不是keyup事件。

Answer 2

您可以在页面加载时触发javascript，以便计算此时留下的字符：

  <span id="counter">Characters left: 350</span>

  <script type="text/javascript">
    $('#status_box').keyup(function () {
        calculateCharactersLeft();
    });
    $(document).ready(function () {
        calculateCharactersLeft();
    });
    var calculateCharactersLeft = function(){
        var left = 350 - $("#status_box").val().length;
        if (left < 0) {
            left = 0;
        }
        $('#counter').text('Characters left: ' + left);
    }
  </script>

我个人更喜欢这样做，而不是将内容注入到erb中，但选择是你的。

事实上，如果你从textarea属性中提取最大长度，而不是在JavaScript中对其进行硬编码，那么你只能在一个地方拥有最大长度值，保持代码的美观和干燥。

在页面刷新时以正确的数字启动字符计数器

2 个答案: