0

誰かがこの機能検出がどのように機能しているかを正確に説明できますか？

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

このコード行は、ブラウザが入力要素のプレースホルダー属性をサポートしているかどうかを検出します。

本番環境にデプロイする前に、ここで内部で行われていることについてもう少し快適になりたいと思います。

これは、要素の存在を確認するためだけに、入力要素のすべての可能な属性を循環することになりますplaceholderか？この場合、マークアップで明示的に記述されていない要素に（何らかの方法で）アクセスできることに気づいていませんでした。

コードソース

4

2 に答える 2

1

要素の属性がブラウザでサポートされているかどうかは、基本的に、ブラウザのjavascript環境にその要素のその属性の定義があるかどうかに帰着します。

定義が存在する場合、属性の「get」アクセスはその属性に対してnull以外の値を返す必要がありますが、定義が存在しない場合はnull /「falseish」（つまり、javascriptがfalseと解釈するもの）の値が返されます。

問題のコードは、JavaScriptの「truish」/「falseish」の値の解釈を利用して、属性の「get」アクセスの戻り値を機能検出の述語として使用します。

于 2012-12-09T01:50:38.413 に答える
1

その要素がページ自体に追加されているかどうかに関係なく、javascriptで作成されたすべての要素にアクセスできます。したがって、要素を作成する場合は、次のように変更できます。

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

次に、jQueryで要素を作成するには、次のようにします。

$('<input />')

そしてもちろん、[0]最後にネイティブDOM要素を取得するため、これら2つはまったく同じです。

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

}
于 2012-12-09T01:54:03.493 に答える