Question

假设表格中包含“store_edit”和id“store_edit_4”以及字段store.description

是否有一种简单的方法可以在rails 3中添加字符计数器，因为他们已经删除了方便的field_observer？

只想让计数器随着他们输入的每个字符而增加......

我在几个博客中尝试了几种方法，但无济于事。这个是一个简单但有点傻，在输入框中显示字数而不是填充div标签，但即使我无法使用相同的字段名称等工作。例如，我把它放在我的（以前是空的）application.js：

$(document).ready(function(){
    var code = document.code_search.search;
    var remaining = document.code_search.remLen1;

    function textCounting(field,cntfield,maxlimit) {
      if (field.value.length > maxlimit) // if too long...trim it!
        field.value = field.value.substring(0, maxlimit);
        // Set the value
        // otherwise, update 'characters left' counter
      else
        cntfield.value = maxlimit - field.value.length;
    }
  $('#test').keydown(function(){textCounting(code, remaining, 5)});       
  $('#test').keyup(function(){textCounting(code, remaining, 5)});   
});

将这个haml添加到我的常规内容之上（只是为了测试它与博客中的相同字段名称等）

= form_tag store_path, :method => 'get', :id => "code_search", :name => "code_search" do
  %p
    = text_field_tag :search, params[:search], :size => '5', :id => 'test'
    %input{:maxlength => "3", :name => "remLen1", :readonly => "", :size => "3", :type => "text", :value => "5"}
      characters left

我身体标签正下方的html如下所示：

  <form accept-charset="UTF-8" action="/stores/AHPGKIUA" id="code_search" method="get" name="code_search"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
    <p>
      <input id="test" name="search" size="5" type="text" />
      <input maxlength='3' name='remLen1' readonly='' size='3' type='text' value='5'>

        characters left
      </input>
    </p>
  </form>

我的html的头部确实包含了application.js

我重新启动了webrick，将我的浏览器缓存... ...

但是当我输入字段时，计数的字符数不会改变。

在Rails 3中添加基本字符计数是否有一些相当直接的方法？

Answer 1

假设你正在使用jQuery和Haml（我假设你是基于你的问题），这是一个有效的例子：

= text_field_tag :search, params[:search], :size => 5, :id => 'test'
%br
%span#char_count 140 characters left
:javascript

  // just a function to pluralize the word "characters" based on the number
  function pluralize_characters(num) {
    if(num == 1) {
      return num + " character";
    } else {
      return num + " characters";
    }
  }

  $("#test").keyup(function() {
    var chars = $("#test").val().length;
    var left = 140 - chars; // sub 140 for your max length
    if(left >= 0) {
      $("#char_count").text(pluralize_characters(left) + " left");
    } else {
      left = left * (-1)
      $("#char_count").text(pluralize_characters(left) + " too long");
    }
  });

基于this code。

Answer 2

如果它是一个选项，你可以使用各种jQuery字符数插件......

您也可以尝试以下代码

// controls character input/counter
$('textarea#body').keyup(function() {
var charLength = $(this).val().length;
// Displays count
$('span#charCount').html(charLength + ' of 250 characters used');
// Alerts when 250 characters is reached
if($(this).val().length > 250)
$('span#charCount').html('<strong>You may only have up to 250 characters.</strong>');
});

<强>参考

http://coda-clips.com/textarea-character-count-jquery

无法获得简单的text_area字符计数器工作

2 个答案: