フォーム要素の反復、Javascriptで

Question

私は作成しているテンプレートモジュールのコードスニペットで作業していました。私は私のページ上のすべてのテキストエリアをループし、いくつかの非常に基本的なバリデーションでフォーマットを適用しようとしています。

Javascriptは私の最強の訴訟ではありませんが、私はそれを一点まで理解することができます。私のIDはどのように収集してから書式を適用するのですか？

例えば、

for each (textarea) 
{ 
    collect character restriction from html 
    display character restriction in a formatted manner 
} 

私はこのスニペットを構築するために使用されている私のJSFiddleが含まれています。

Answer 1

私はFodorZoltánのクラス@に基づいてきました。私のクラスは現在次のようになります。

• カウンタをテキストエリアの下に追加します。
• テキストエリアの下の部分にカウンタを配置します。

ええ、私は怠惰で、コードは成長しています。いくつかのイベントを追加し、クラス名を"TextAreaRanger"に変更しました。それはhereを働いている：

var TextAreaRanger = function(input) { 

    this.MAX = parseInt(input.getAttribute('maxlength')); 
    this.INPUT = input; 

    // add input events 
    input["oncut"] = 
    input["onpaste"] = 
    input["onkeydown"] = 
    input["onkeyup"] = this.update.bind(this); 

    // create wrapper element 
    this.wrapper = document.createElement('div'); 
    this.wrapper.innerHTML = 'Chars left: '+ (this.MAX - input.value.length); 

    /* input parent element */ 
    var ipar = input.parentNode; 

    // find input's i 
    for (var i = 0, el; el = ipar.children[i]; i ++) { 
     if(el === input) break; 
    } 

    // append wrapper below the input 
    if (ipar.children[++i]) { 
     ipar.insertBefore(this.wrapper, ipar.children[i]); 
    } else ipar.appendChild(this.wrapper); 

    /* stylize wrapper */ 
    this.wrapper.style.position = "relative"; 
    this.wrapper.style.color = '#f00'; 
    this.wrapper.style.fontSize = '11px'; 
    this.wrapper.style.left = (input.offsetLeft + (input.offsetWidth - 100)) + "px"; 
    this.wrapper.style.top = (-parseInt(this.wrapper.style.fontSize) * 2) + "px"; 
}; 

// Update the counter 
TextAreaRanger.prototype["update"] = function() { 
    this.wrapper.innerHTML = 'Chars left: ' + (this.MAX - this.INPUT.value.length); 
}; 

Answer 2

私はaswell、他のことを行うように拡張することができ、このためのプロトタイプクラスを作成することをお勧め：

var CharWatcher = function(input){ 
    this.max = input.getAttribute('max-length'); 
    this.input = input; 

    input.onKeyDown = this.update.bind(this); 

    this.wrapper = document.createElement('div'); 
    this.wrapper.innerHTML = 'Chars left: '+ (max - input.value.length); 
    /* style wrapper element */ 
    /* append around input */ 
}; 

CharWatcher.prototype = { 
    update: function(){ 
    this.wrapper.innerHTML = 'Chars left: ' + (this.max - this.input.value.length); 
    } 
}; 

/* Somewhere else */ 

var textareas = document.getElementsByTagName('textarea'); 
for(var i = 0, l = textareas.length; i < l; i++) 
    new CharWatcher(textareas[i]);