Добавить количество символов для входов администратора и текстовых полей

Question

Я хотел бы добавить количество символов для каждой области ввода и текста на странице сведений о продукте в моем администраторе магазина Magento.

Я привык к jQuery, но, если возможно, предпочел бы использовать библиотеку Prototype по умолчанию. Я нашел этот код куда-нибудь, который делает трюк для краткого описания и описания полей в частности, используя их идентификаторы, чтобы нацелить их:

Event.observe(window, 'load', function() { 

Element.insert($('short_description').up().next().down('span'), { 
    'after': "<div id='short_description_counter'>Char count: <span id='short_description_counter_num'>"+$('short_description').getValue().length+"</span></div>" 
}); 
Element.insert($('description').up().next().down('span'), { 
    'after': "<div id='description_counter'>Char count: <span id='description_counter_num'>"+$('description').getValue().length+"</span></div>" 
}); 

Event.observe('short_description', 'keyup', function(event) { $("short_description_counter_num").update(this.getValue().length); }); 
Event.observe('description', 'keyup', function(event) { $("description_counter_num").update(this.getValue().length); }); 
}); 

Может кто-то с опытом Prototype сказать мне, как изменить это так, что он работает на каждом входе и textarea, поэтому не указывая ID? Я предполагаю, что есть некоторые функции (функции), которые можно использовать.

UPDATE: Вот текущий код работает на текстовое поле, указанный это ID - http://jsbin.com/isisur/2/edit

Answer 1

Мой прототип ржавый, но я думаю это будет работать:

Event.observe(window, 'load', function() { 
    $$('input[type="text"], textarea').each(function(i) { 
     var my_id = $(i).readAttribute('id'); 
     $(i).insert({ 
      'after': "<div id='"+my_id+"_counter'>Char count: <span id='"+my_id+"_counter_num'>"+$(i).getValue().length+"</span></div>" 
     }); 
     $(i).observe('keyup', function(e) { 
      $(my_id+"_counter_num").update($(this).getValue().length); 
     }); 
    }); 
}); 

JSFiddle

Answer 2

Более лишенный код, который работает с каждым полем с классами validate-length и maximum-length-XXX:

document.observe('dom:loaded', function() { 
    Element.addMethods({ 
     prepare_for_countdown: function(element) { 
      var elm = $(element); 
      if(!elm.retrieve('counter')) { 
       var counter = new Element('span'); 
       elm.next('.note').insert(counter); 
       elm.store('counter', counter); 
       var maxLen = elm.className.match(/maximum-length-(\d+)/)[1]; 
       elm.store('maxLen', maxLen); 
      } 
      return elm; 
     }, 
     countdown: function(element) { 
      var elm = $(element); 
      var curLen = elm.getValue().length; 
      var maxLen = elm.retrieve('maxLen'); 
      var count = maxLen - curLen; 
      var counter = elm.retrieve('counter'); 
      if (curLen >= maxLen) { 
       counter.update(' (' + count + ')').setStyle({'color': 'red'}); 
      } else { 
       counter.update(' (+' + count + ')').setStyle({'color': 'green'}); 
      } 
      return elm; 
     } 
    }); 

    $$('.validate-length').invoke('prepare_for_countdown').invoke('countdown'); 

    document.on('keyup', '.validate-length', function(evt, elm) { 
     elm.countdown(); 
    }); 
}); 

От: Prototype.js 1.7 uncaught exception: Syntax error, unrecognized expression: [object HTMLInputElement]