2012-12-09 32 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'访问的返回值作为特征检测的谓词。