Javascript 将字符计数添加到管理输入和文本区域

我想在我的Magento商店管理员的“产品详细信息”页面的每个输入和文本区域中添加一个字符计数

我习惯于jQuery，但如果可能的话，我更愿意使用默认的原型库。我在某个地方找到了这段代码，它专门针对短描述和描述字段，使用它们的ID来定位它们：

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

事件。观察（窗口“加载”，函数（）{
元素.insert（$（'short_description'）.up（）.next（）.down（'span'），{
'在'：'字符计数：“+$（'short_description'）.getValue（）.length+”
});
元素.insert（$（'description'）.up（）.next（）.down（'span'），{
'在'：'字符数：“+$（'description'）.getValue（）.length+”
});
Event.observe（'short_description'，'keyup'，function（Event）{$（'short_description_counter_num”）.update（this.getValue（）.length）；}）；
Event.observe（'description'，'keyup'，函数（Event）{$（'description_counter_num”）.update（this.getValue（）.length）；}）；
});

有原型经验的人能告诉我如何编辑它，使它在每个输入和文本区域上运行，而不指定ID吗？我想每个函数都有一些可以使用的

更新：

---

下面是当前在文本区域上工作的代码，由其ID指定-

我的原型已经生锈，但我认为这会起作用：

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

事件。观察（窗口“加载”，函数（）{
$$（'input[type=“text”]，textarea'）。每个（函数（i）{
var my_id=$（i）.readAttribute（'id'）；
$（i）.插入（{
'在'：“字符数：”+$（i）.getValue（）.length+“”
});
$（i）.观察（'keyup'，功能（e）{
$（my_id+“_counter_num”）.update（$（this.getValue（）.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();
    });
});

发件人：
为这次尝试干杯！抛出一个错误：“UncaughtTypeError:Cannotcallmethod'down'of undefined”我想你不能用一段HTML来更新这个问题，它显示了一个文本输入和/或文本区域以及周围的HTML代码以供参考？这非常有帮助。用工作小提琴查看我的最新答案。