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

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中硬编码它，那么你在一个地方只有最大长度值，保持你的代码漂亮和干燥。