Topic: Rails 3 Javascript Character Counter

Can  anyone point me in the right direction for making a live character counter in rails 3?  I have to make sure the number of characters as the user is typing is limited to 5.

Thanks,

RPR

Re: Rails 3 Javascript Character Counter

So, it seems it would be easy to do in Prototype, but I am using JQuery which seems much more difficult.  I found this on the web:

    <form name="myForm" action="" method="post">
    <b>One Function to Count and Limit Multiple Form Text Areas</b><br>
   
    <textarea name="message1" wrap="physical" cols="5" rows="1"
    onKeyDown="textCounter(document.myForm.message1,document.myForm.remLen1,5)"
    onKeyUp="textCounter(document.myForm.message1,document.myForm.remLen1,5)"></textarea>       
    <br>
    <input readonly type="text" name="remLen1" size="3" maxlength="3" value="5">
    characters left
    <br>
    <input type="Submit" name="Submit" value="Submit">
    <br>
    </form>

with the following js

function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
cntfield.value = maxlimit - field.value.length;
}

So, how to convert this to an unobtrusive rails 3 friendly format?

Last edited by rambor (2010-12-10 05:24:23)

Re: Rails 3 Javascript Character Counter

So, to answer my own question - I got this working!

in application.js

$(document).ready(function(){
  $('#test').keydown(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);
        // otherwise, update 'characters left' counter
      else
        cntfield.value = maxlimit - field.value.length;
    }
    textCounting(code, remaining, 5);
  });   
   
  $('#test').keyup(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);
            // otherwise, update 'characters left' counter
        else
           cntfield.value = maxlimit - field.value.length;
    }
    textCounting(code, remaining, 5);
  });
});

As you can see, the code repeats, so now I will edit it down so I don't repeat myself but I got it working - unobtrusively!  It looks like I have to define a single function for the stuff after keyup/keydown.  Any thoughts?

Last edited by rambor (2010-12-11 02:06:15)

Re: Rails 3 Javascript Character Counter

OK, so now I got something tight with little redundancy in the code:

In 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)});   
});

in view:

<%= form_tag code_search_path, :method => 'get', :id => "code_search", :name => "code_search" do %>
    <p>
    <%= text_field_tag :search, params[:search], :size => '5', :id => 'test' %>
    <br>
    <input readonly type="text" name="remLen1" size="3" maxlength="3" value="5">
    characters left
    <br>
    <%= submit_tag "Submit Data for Deposit", :name => nil %>
    </p>
<% end %>

This seems to be consistent with unobtrusive javascript using JQuery and rails.

Last edited by rambor (2010-12-11 06:46:22)

Re: Rails 3 Javascript Character Counter

Here's a similar solution using Prototype.

http://blog.milkfarmproductions.com/pos … er-counter