2013-04-04 26 views
2

我想在我的Magento商店管理中的產品詳細信息頁面中的每個輸入和文本區域添加字符數。添加字符數到管理員輸入和textareas

我習慣於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); }); 
}); 

有人用原型的經驗能告訴我如何編輯這使得它運行在每個輸入和textarea,所以沒有指定一個ID?我假設有一些可以使用的每個(功能)。

UPDATE: 下面是當前的代碼在一個文本,由它指定的工作的ID - http://jsbin.com/isisur/2/edit

回答

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

+0

乾杯的嘗試!拋出一個錯誤,雖然:*「未捕獲TypeError:不能調用'未定義的'方法''* – 2013-04-09 19:12:08

+0

我不認爲你可以用一段HTML代碼更新問題,它顯示一個文本輸入和/或textarea和周圍的HTML代碼參考? – 2013-04-09 19:15:50

+0

已經排序了!見上面:-) – 2013-04-09 19:26:39

0

一個更靈活的代碼,適用於類validate-lengthmaximum-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]