Question

我一直在为我一直在创建的模板模块编写代码片段，而且我已经碰壁了。我正在尝试遍历我页面上的所有textareas，并使用一些非常基本的验证来应用格式。

Javascript不是我最强的套装，但我可以理解它，我的问题是如何收集ID然后使用它们来应用格式。

例如，

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

我已经包含了我用来构建此代码段的JSFiddle。

Answer 1

我建议为此创建一个原型类，可以扩展为做其他事情：

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

Answer 2

我的基础是@FodorZoltán的课程。我的班级现在做了：

将计数器附在textarea下面;
将计数器放在textarea的下面部分;

是的，我很懒，而且代码已经长大了。我添加了一些事件，并将类名重命名为"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);
};

表单元素迭代，在Javascript中

2 个答案: