使用純Javascript和不使用getElementById從自定義數據屬性獲取值

我需要從這些字段獲取自定義數據屬性。使用純Javascript和不使用getElementById從自定義數據屬性獲取值

<input type="text" name="FirstName" data-type="string" placeholder="First name" autocomplete="off" > 

<input type="text" name="phone" data-type="number" placeholder="Last name" autocomplete="off" >

這是代碼選擇字段，而使用的getElementById：

var elements = this.elements; 

      this.elements = document.getElementsByTagName('input'); 
      var elements = this.elements; 
      var group = elements.length; 


      for (var i = 0; i < group; i++) { 

       this.controller.validate({ 
        field: elements[i], 
        value: elements[i].value, 
        dataType: e.target.getAttribute('data-type'), // <---- ERROR: This is undefined 
        optional: e.target.getAttribute('data-optional')// <---- ERROR: This is undefined 
       }); 

      }

使用element.getAttribute('data-type')在正常工作的Chrome和火狐但上IE不能

The挑戰：

我需要讓這些自定義的值從任何瀏覽器屬性：

我不能使用任何第三方庫。
我不能使用的getElementById，因爲這些領域是動態的。

什麼想法？

來源

2015-12-01 Leo Javier

究竟如何在Internet Explorer中失敗？ IE永遠支持'setAttribute（）'和'getAttribute（）'。 – Pointy

我得到這個錯誤'SCRIPT438：對象不支持屬性或方法'getAttribute''這是支持的邊緣，但如果你回退到版本11,10,9或8它不支持 –

這意味着你是什麼認爲是一個DOM元素的引用實際上是別的東西。你必須發佈更多的代碼才能讓任何人提供幫助。 – Pointy

現在你已經更新了您的問題，我們可以看到，你的錯誤是在調用getAttribute上e.target這可能不存在取決於你如何傾聽時，你是在瀏覽器中。

當然，將一個全面的驗證處理程序附加到輸入將會更好，忽略e，並且只需一次檢查所有輸入以進行驗證。

該處理程序的內容可能是這個樣子：

var elements = document.getElementsByTagName('input'); 

for (var i = 0; i < elements.length; i++) { 

    var type = elements[i].getAttribute('data-type'); 
    var optional = elements[i].getAttribute('data-optional'); 

    console.log('type/optional:', type, optional); 

    this.controller.validate({ 
    field: elements[i], 
    value: elements[i].value, 
    dataType: type, 
    optional: optional 
    }); 
}

如果你堅持使用事件，那麼也許你應該只檢查已調度事件的特定輸入，減輕了getElementsByTagName需要：

var target = e.target ? e.target : e.srcElement; 

var type = target.getAttribute('data-type'); 
var optional = target.getAttribute('data-optional'); 

console.log('type/optional:', type, optional); 

this.controller.validate({ 
    field: target, 
    value: target.value, 
    dataType: type, 
    optional: optional 
});

請注意，data-optional不存在爲您的標記屬性，因此其價值null。

來源

2015-12-01 15:37:57 shennan

mmmm ....這可能是問題...謝謝Shennan我現在正在看一看.. –

@LeoJavier由於使用了'e.target'，很可能你的代碼在IE9中失敗。另外，你應該考慮我的兩個建議。 – shennan

謝謝深南你說的對，IE環境中沒有'e.target'。 –

我更喜歡使用;

document.querySelectorAll('[data-type]');

來源

2015-12-01 15:39:12

querySelectorAll部分受IE8支持 –

使用純Javascript和不使用getElementById從自定義數據屬性獲取值

回答

相關問題