Question

In my ruby on rails app I am trying to use a Prototype Form.Element.Observer to run a count of the characters in a message. This works fine on Firefox/Safari/Chrome, but not on IE. On IE the observer simply does not fire. Is there a fix or a different way of doing this?

My ruby tag looks like this:

<%= countdown_field('txtmsg[memo]','memo-counter', 141, :frequency => 0.10) %>

The countdown_field function looks like this:

  def countdown_field(field_id,update_id,max,options = {})
    function = "$('#{update_id}').innerHTML = (#{max} - $F('#{field_id}').length);"
    count_field_tag(field_id,function,options)
  end

  def count_field_tag(field_id,function,options = {})  
    out = javascript_tag function, :defer => 'defer'
    out += observe_field(field_id, options.merge(:function => function))
    return out
  end

The resultant HTML looks like this:

<textarea class="memo-tag text txtmsg-memo" id="txtmsg[memo]" name="txtmsg[memo]" />
<p>You have <span id="memo-counter">...</span> characters left.</p>

<script defer="defer" type="text/javascript">
  $('memo-counter').innerHTML = (141 - $F('txtmsg[memo]').length);
</script>
<script type="text/javascript">
  new Form.Element.Observer('txtmsg[memo]', 0.1, function(element, value) {
                  $('memo-counter').innerHTML = (141 - $F('txtmsg[memo]').length);})
</script>

Answer 1

First of all you need to add a closing tag for your <textarea> element because it can’t be self-closing, and the cols and rows attributes are mandatory.

Using the code below I can partially get it working for IE. It decrements the counter as you type characters, but for some reason the Delete, Backspace and cursor keys don’t work when using IE6! It works fine using Firefox 3.6.

<textarea class="memo-tag text txtmsg-memo" id="txtmsg[memo]" cols="40" rows="2" name="txtmsg[memo]"></textarea>
<p>You have <span id="memo-counter">...</span> characters left.</p>
<script type="text/javascript">
  new Form.Element.Observer("txtmsg[memo]", 0.1, function(element, value) {
    $("memo-counter").update(141 - value.length);
  });
</script>