如何在Rails中实现字计数器？

Question

我想在表单中实现一个实时字计数器。 因此，当用户在框中键入内容时，框下方的一行会更新正确的单词数。

这是相关的表单代码（我的观点是.html.haml）：

= f.semantic_fields_for :student_biography do |fb|
  = fb.inputs :name => "About" do
    = fb.input :short_statement, :label => 'Describe yourself! (25 words) ' , :input_html => {:id => "bio_prof_stmt" }

所以在这个描述框下面，我想计算单词的数量并显示“满分25”的通知。

我假设这只是我需要添加的一些JavaScript，但我不知道从哪里开始。

Rails 3.2.11，Ruby 1.9.7

谢谢！

Answer 1

它应该不会太难，你需要一个div，它的内容在输入框的keyup事件上更新：

这有点来自内存，可能需要一些调整，但它应该让你走在正确的道路上：

= fb.input :short_statement, :label => 'Describe yourself! (25 words) ' , :input_html => {:id => "bio_prof_stmt" }, :onkeyup => "update_word_count(this);"

我认为这是正确的haml语法，如果不是，请纠正我：

#word-count-container 

预期的html：

<div id="word-count-container"></div>

使用Javascript：

<script type="text/javascript">
  function update_word_count(object) {
    words = object.value.match(/\S+/g).length.toString();
    $('#word-count-container').innerHTML = words + " out of 25 used";
  }
</script>

替代UJS方法（从输入中删除onkeyup标记）：

<script type="text/javascript">
  $('#short_statement').onkeyup(function() { 
      update_word_count(this);
  });

  function update_word_count(object) {
    words = object.value.match(/\S+/g).length.toString();
    $('#word-count-container').innerHTML = words + " out of 25 used";
  }
</script>

Answer 2

这似乎是你必须在服务器端和客户端验证的东西。 所以不要忘记这样做。

validates :short_statement, length: { maximum: 25 }

如果你想要严格的字数统计，你可以使用Words Counted gem。 免责声明我写的。