2

我想在我的 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(function) 可以使用。

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

4

2 回答 2

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

于 2013-04-09T15:53:36.537 回答
0

一个更灵活的代码，适用于每个带有类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 未捕获的异常：语法错误，无法识别的表达式：[object HTMLInputElement]

于 2017-08-12T10:39:31.940 回答