在 Rails 的 Ruby 中的 simple_form 中添加字符计数器

Question

我使用 simple_form gem 并且我想要在文本字段上使用一个简单的字符计数器。有人告诉我，这可能有效：

将此添加到表格中：

<%= f.input :body, id: "body-field" %>
<span id="body-count">0 characters</span>

和javascript:

$("#body-field").on("keyup", function(){
length = $(this).val().length;
$("#body-count").html(length);
});

我从这里得到的信息（注意：全是广告）：http://www.sohua.xyz/questions-full/4320915/how-do-i-implement-a-basic-character-counter-in-a-simple-form

我这样做了，但没有任何反应。这是我的实际代码 chapters/new.html.erb:

    <%= simple_form_for([@book, @book.chapters.build]) do |f| %>
    <%= f.input :chaptertitle %>
    Mininmum amount of characters: <%= @book.min_length %> Maximum amount of characters: <%= @book.max_length %>
    <%= f.input :chaptercontent, id: "body-field" %>
    <span id="body-count">0 characters</span>
    <%= f.input :author %>
    <%= f.button :submit %>
<% end %>

    <script>
      $("#body-field").on("keyup", function(){
        length = $(this).val().length;
        $("#body-count").html(length);
      });
    </script>

你能给我一些建议吗？如何让它发挥作用？

Answer 1

您需要将代码包装在 jquery 文档就绪函数中：

$(function() {
  $("#body-field").on("keyup", function(){
    var length = $(this).val().length;

    $("#body-count").html(length);
  });
});

为什么不使用现有的库呢？ https://github.com/dtisgodsson/jquery-character-counter

Answer 2

您可能想使用 js 或 coffee-script，我在下面提供了一个咖啡脚本示例：

将这段代码添加到您的 chapters.coffee 文件中：

ready = ->
  totalChars = 100
  #Total characters allowed
  countTextBox = $('#body-field')
  # Remaining chars count will be displayed here
  charsCountEl = $('#countchars')
  #initial value of countchars element
  charsCountEl.text totalChars
  #user releases a key on the keyboard
  countTextBox.keyup ->
    #get chars count in Text field
    thisChars = @value.replace(/{.*}/g, '').length
    if thisChars > totalChars
      # total extra chars to delete
      CharsToDel = thisChars - totalChars
      #remove excess chars from text field
      @value = @value.substring(0, @value.length - CharsToDel)
    else
      #count remaining chars
      charsCountEl.text totalChars - thisChars
    return
  return

$(document).ready ready
$(document).on 'page:load', ready
# Loads javascript while loading page

将此行添加到表单中文本输入字段的正下方。

var ready;
var charsCountEl, countTextBox, totalChars;
totalChars = 100;
countTextBox = $('#body-field');
charsCountEl = $('#countchars');
charsCountEl.text(totalChars);
countTextBox.keyup(function() {
  var CharsToDel, thisChars;
  thisChars = this.value.replace(/{.*}/g, '').length;
  if (thisChars > totalChars) {
    CharsToDel = thisChars - totalChars;
    this.value = this.value.substring(0, this.value.length - CharsToDel);
  } else {
    charsCountEl.text(totalChars - thisChars);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="body-field" />
<span id="countchars"></span>

如果您在 javascript/ 文件夹下的文件没有扩展名 .coffee，请将其重命名为 chapters.coffee，如果有，就这样。

PS：这是 http://pastebin.com/LZb1DAC4 的 javascript 版本。

参考：

Answer 3

这个解决方案不如 Abhinay 的解决方案好，但它对我有用：（请注意，我是业余爱好者，这段代码可能很可怕）

Javascript代码：

<script>

  $(document).ready(function(){

    var choosingbar = function( event ){
      $(event.target).parents(".counting").children(".count").text($(event.target).val().length);
    };

    $(".counting textarea").keyup(choosingbar);
  });

</script>

new.html.erb代码：

<%= simple_form_for([@book, @book.chapters.build]) do |f| %>
    <%= f.input :chaptertitle %>
    Mininmum amount of characters: <%= @book.min_length %> Maximum amount of characters: <%= @book.max_length %>
    <div class="counting" ><%= f.input :chaptercontent %>Characters: <span class="count"></span></div><br>
    <%= f.input :author %>
    <%= f.button :submit %>
<% end %>

在 Rails 的 Ruby 中的 simple_form 中添加字符计数器

Add character counter in simple_form in Ruby on Rails

ruby-on-rails

simple-form