javascript - 无法让简单的 text_area 字符计数器工作

Question

假设一个表单具有类“store_edit”和id“store_edit_4”以及字段store.description

既然 Rails 3 已经删除了方便的 field_observer，是否有一种简单的方法可以在 Rails 3 中添加字符计数器？

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

<小时/>

我在几个博客中尝试了多种方法，但没有成功。这是一个简单但有点愚蠢的方法，在输入框中显示字符计数而不是填充 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

我的 body 标签正下方的 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 .