表單元素迭代，使用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

回答

相關問題