javascript - 表单元素迭代，在 Javascript 中

Question

我一直在为我创建的模板模块编写代码片段，可以这么说，我碰壁了。我正在尝试遍历我页面上的所有文本区域，并通过一些非常基本的验证应用格式。

Javascript 不是我的强项，但我可以在一定程度上理解它，我的问题是如何收集 ID，然后使用它们来应用格式。

例如，

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

我已经包含了我的 JSFiddle我一直在用它来构建这个片段。

Answer 1

我建议为此创建一个原型(prototype)类，它也可以扩展为做其他事情:

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]);