为管理输入和textareas添加字符数

时间:2013-04-04 11:29:43

标签: javascript magento prototypejs

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

我习惯了jQuery,但如果可能的话,宁可使用默认的Prototype库。我发现这个代码专门用于简短描述和描述字段的技巧,使用他们的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);    });
});

具有Prototype经验的人能告诉我如何编辑它以便它在每个输入和textarea上运行,所以不指定ID吗?我假设有一些(功能)可以使用。

更新: 这是在textarea上工作的当前代码,由它的ID指定 - http://jsbin.com/isisur/2/edit

1 个答案:

答案 0 :(得分: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