2012-12-09 31 views
0

有人可以解釋這個功能檢測是如何工作的嗎?JQuery中的輸入標籤功能檢測

// Create a dummy element for feature detection 
if (!('placeholder' in $('<input>')[0])) { 

這行代碼檢測瀏覽器是否支持輸入元素的佔位符屬性。

我想有點更舒適與什麼是引擎蓋下在這裏部署到生產環境之前回事。

這樣做是否會循環輸入元素的所有可能屬性,以檢查是否存在placeholder元素?如果是這種情況,我不知道我們能夠訪問(以某種方式)未在標記中明確闡述的元素。

Code Source

回答

1

您可以訪問使用javascript創建的任何元素,而不管該元素是否附加到頁面本身。所以,如果你創建一個元素,你可以改變它,就像這樣:

var element = document.createElement('input'); 
    element.style.border = '1px solid red'; 
    element.value = 'some value'; 

我們jQuery中創建一個元素,你這樣做:

$('<input />') 

,當然還有[0]在年底得到本地DOM元素,所以這兩個是完全一樣的:

var DOM_element1 = $('<input />')[0]; 
var DOM_element2 = document.createElement('input'); 

一旦你創建了一個元素,該元素的所有屬性都可以爲好,如element.value等。

如果瀏覽器支持的佔位符,所述佔位符屬性將存在的輸入元件上,並且由於我們創建的元素實際上是一個節點或元素對象,我們使用in關鍵字,以檢查是否該屬性是可用的:

var element = document.createElement('input'); 

if ('placeholder' in element) { 
    //the element has a placeholder attribute, 
    //so it must be supported by the browser 
} 

另一種方式做同樣的事情將是直接檢查屬性看,它不是不確定的,就像這樣:

if (typeof element.placeholder!=undefined) { //should return string if present 

} 
1

無論是否爲元素的屬性是由瀏覽器支持基本上可以歸結爲瀏覽器是否是JavaScript環境具有該元素屬性的定義。

如果定義存在,屬性的'get'訪問應該返回該屬性的非空值,而如果定義不存在null /'falseish'(即javascript解釋爲false的東西)值被返回。

有問題的代碼利用javascript的'truish'/'falseish'解釋值來使用屬性上'get'訪問的返回值作爲特徵檢測的謂詞。