Question

有人可以准确解释这个功能检测是如何工作的吗？

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

这行代码检测浏览器是否支持输入元素的占位符属性。

在部署到生产环境之前，我想对这里的内容更加满意。

这最终会循环遍历输入元素的所有可能属性，只是为了检查是否存在placeholder元素？如果是这种情况，我不知道我们（以某种方式）访问标记中未明确说明的元素。

Code Source

Answer 1

浏览器是否支持元素的属性基本上归结为浏览器的javascript环境是否具有该元素的该属性的定义。

如果定义存在，属性的'get'访问应该返回该属性的非null值，而如果定义不存在则null /'falseish'（即javascript解释为false的值）值归还。

有问题的代码利用了javascript对值的'truish'/'falseish'解释，使用属性'get'访问的返回值作为特征检测的谓词。

Answer 2

您可以访问使用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

}

JQuery中的输入标记特征检测

2 个答案: