0

我想以一种形式实现实时单词计数器。因此，当用户在框中输入内容时，框下方的一行会更新为正确数量的单词。

这是相关的表单代码（我的观点是.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" }

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

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

导轨 3.2.11，红宝石 1.9.7

谢谢！

4

2 回答 2

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>
于 2013-05-24T17:02:32.640 回答
1

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

validates :short_statement, length: { maximum: 25 }

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

于 2014-04-30T20:09:55.410 回答