表单元素迭代，使用Javascript

我一直在为一个我一直在创建的模板模块编写代码片段，并且我打了一堵墙可以这么说。我试图循环浏览我的页面上的所有textareas，并使用一些非常基本的验证来应用格式。表单元素迭代，使用Javascript

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

例如，

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

我已经包括了我的JSFiddle，我一直用它来建立这个片段。

来源

2016-08-12 Beaniie

你可以用'的getAttribute（ '身份证'）'来获取对象的ID：https://jsfiddle.net/grhLupp7/2/。但是，您已经在'count'中收集了所有textareas。只需通过'count [i]'访问他们' – eithed

@eithedog'el.id' < - 这是最短的 – Hydro

我可以通过索引访问它们，但它会是数字，我将如何捕获ID的？ – Beaniie

我根据@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); 
};

来源

2016-08-12 10:38:25 Hydro

看到别人是如何工作的确很震撼，在我看来这很优雅。我想在我完全理解你的答案之前，我需要更多地研究Javascript类。感谢您对此的帮助。 :) – Beaniie

@Beaniie哦......类不是解决这个问题的方法，但建议他们在JavaScript内存中存储较少的数据，这是因为每个类（*函数*）都包含可能的原型对象存储可以在同一个类的实例中使用的值或方法。函数A（）{this.call = function（）{alert（1）; };}; var a = new A，b = new A;'比函数A（）{}慢; A.prototype.call = function（）{alert（1）; }; var a = new A，b = new A;'。 – Hydro

我建议创建此原型类，可以扩展到藏汉做其它事情：

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

来源

2016-08-12 10:27:54

表单元素迭代，使用Javascript

回答

相关问题