向管理输入和文本区域添加字符计数

Add a character count to admin inputs and textareas

本文关键字：添加 字符 区域 文本 管理 输入      更新时间：2023-09-26

我想在我的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);    });
});

有原型经验的人能告诉我如何编辑这个，使它运行在每个输入和文本区域，所以不指定ID?我假设有一些each(函数)可以使用。

更新:下面是文本区域的当前代码，由它的ID指定- http://jsbin.com/isisur/2/edit

我的原型是生锈的，但我认为这将工作:

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

一个更灵活的代码，适用于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();
    });
});

相关文章：