if"> if"> if" />

プレースホルダがサポートされているかどうかを確認する簡単な方法は?

ユーザーのブラウザでサポートされている場合は、 HTML5 "プレースホルダ" 属性をコード内で使用したい場合はフォームの上にフィールド名を表示するだけです。しかし、私はプレースホルダーがサポートされているかどうか、ユーザーが使用しているブラウザのバージョン/名前は確認したくありません。

だから理想的には私は何かをしたいと思う

    <body>

     <script>

           if (placeholderIsNotSupported) {
             Username;
           } 
      </script>
    <input type = "text" placeholder ="Username">
</body>

JavaScriptのビットの私は確かに私を除いて。ヘルプは高く評価されています!

51

9 答え

function placeholderIsSupported() {
    var test = document.createElement('input');
    return ('placeholder' in test);
}

私は、 jQuery化バージョンを出発点とする。 (ちょうどそれが期日であるところに信用を与える。)

78
追加された
ありがとう。これを試してみましょう...どのように戻ります( 'テスト中のプレースホルダ')は機能しますか?私は標準的な参照を教えていただけますか?
追加された 著者 algorithmicCoder,
IE10 document.createElement( 'input')。hasOwnProperty( 'placeholder'&zwnj;)はfalseを返します。 IE9では、1行のコードはtrueを返しますが、2行のコード(作成された要素を変数に保存する)はfalseを返します
追加された 著者 blazkovicz,
@LarsEbertなぜなら、1つの行にすべてを持たない理由には、可読性/保守性が含まれているため、他の人と作業している場合にマージ競合の可能性が低くなり、一般的には良いコード習慣を習得する必要があります。これらは、それを独自の関数に入れる理由に似ています(ただし、その場合はリストにコードを再利用できます)。
追加された 著者 Trott,
Windows 7のIE9で問題はありません。コードを正しくコピーしてもよろしいですか? jsbin.com/ibubif/1/editでjsbin.com/ibubif/1にアクセスしてjsbinを実行してみてください。 IE9では、プレースホルダがサポートされていないことを知らせるアラートが表示されます。
追加された 著者 Trott,
私はあなたが間違っていると信じています、@ jeff9888。このコードをIE9( jsbin.com/ibubif/1/eded )で実行してみました。問題なく。 (それは正しくプレースホルダがサポートされていないことを正しく報告しました)私はBrowserStackをIE8、IE7、IE6でテストするために使用しました。
追加された 著者 Trott,
@iMoses私はIE8 VMを起動してチェックしました。 hasOwnProperty はIE8のこのコンテキストではサポートされていません。これは多くのオブジェクトで動作しますが、 document.createElement( 'input')の結果ではありません。さて、ブラウザの癖! : - |
追加された 著者 Trott,
in キーワードは、指定されたプロパティが指定されたオブジェクトにある場合に true を返します。 developer.mozilla.org/ja/JavaScript/Reference/Operators/in
追加された 著者 Trott,
IE8以前のバージョンでは、 hasOwnProperty がサポートされている場所に一定の制限があります。私は、このコンテキストで hasOwnProperty を使用するとIE8が壊れる可能性があると思います。ここでは機能の検出を行っているので、古いブラウザをサポートすることが質問を投稿する人にとって重要であると推測しています。
追加された 著者 Trott,
IE9でテストが失敗しました。 @ニキータの答えが良いです。
追加された 著者 Jeffrey Neo,
とにかく、私はWindows7でIE9.0.8112を試してみると、TRUEを返しますが(実際にはサポートされていません)、入力値に何も表示されませんでした。
追加された 著者 Jeffrey Neo,
他のブラウザは、おそらくIEの問題を正しく返しますか?
追加された 著者 Jeffrey Neo,
(document.createElement( 'input')に 'プレースホルダ')を使用しない理由は何ですか?
追加された 著者 Lars Ebert,
CoffeeScriptでは、これは "テストのプレースホルダ" でなければなりません。 "in"ではなく "of"に注意してください。それ以外の場合は、正しく検出されないJSの大きなチャンクに変換されます...
追加された 著者 Henrik N,
より良いパフォーマンスを得るには、if(document.createElement( 'input')。hasOwnProperty( 'placeholder&zwnj;')){/ * ... * /} hasOwnProperty >
追加された 著者 iMoses,
私は自分自身をチェックしていませんが、MSDNによると: "次のドキュメントモードでサポート:Quirks、Internet Explorer 6標準、Internet Explorer 7標準、Internet Explorer 8標準、Internet Explorer 9標準、Internet Explorer 10標準"
追加された 著者 iMoses,

あるいは単に:

if (document.createElement("input").placeholder == undefined) {
   //Placeholder is not supported
}
35
追加された

GC'dでなければならないメモリ内のinput要素を作成しない別の方法:

if ('placeholder' in HTMLInputElement.prototype) {
    ...
}
7
追加された
代わりにHTMLInputElement.prototype.hasOwnProperty( "プレースホルダ")を使用しましたが、プレースホルダがチェーンの一部である場合や、パフォーマンスを向上させるかどうかはわかりません。
追加された 著者 Raimonds,
あなたは2017年にIE7をサポートする必要がありますか?心中お察しします...
追加された 著者 isapir,
GCはガベージコレクションを意味するので、これは速くなければなりません。ドキュメントの外観からも、まだ作成する必要はなく、優れた答えと思われます。
追加された 著者 Joshua Robinson,
@algorithmicCoderこの回答を確認できますか?私はそれがあなたがパフォーマンス的なやり方でやろうとしていることによく合っていると思います。
追加された 著者 probablyup,
IE7で 'HTMLInputElement'が定義されていない
追加された 著者 PapillonUK,

Modernizrを使用している場合は、

if(!Modernizr.input.placeholder){
  ...
}
6
追加された

http://html5tutorial.info/html5-placeholder.php has the code to do it.

すでにjQueryを使用している場合は、実際にこれを行う必要はありません。プレースホルダプラグインが用意されています( http://plugins.jquery.com/plugin-tags/placeholder)を使用し、できるだけHTML5属性を使用します。そうでない場合は、Javascriptでシミュレーションします。

3
追加された

私は同じことをしようとしている...ここで私はこれを書いた

if(!('placeholder'in document.createElement("input"))){
   //... document.getElementById("element"). <-- rest of the code
}}

これで、要素をプレースホルダで識別するためのIDが必要です。 これは、プレースホルダがサポートされていない場合にのみ要素を識別するのにも役立つかどうかはわかりません。

2
追加された

注:プレースホルダはインターネットエクスプローラでは動作しません。動作するはずです

document.createElement("input").placeholder == undefined

Internet Explorer 11で動作しません - document.createElement( "input")。placeholder return empty string


var testInput = document.createElement('input');
testPlaceholderCompatibility = ('placeholder' in testInput);

Internet Explorer 11で動作しない - 真を返す


'placeholder'in document.createElement("input")

Internet Explorer 11で動作しない - 真を返す


理論的には、インターネットエクスプローラ11はプレースホルダをサポートすることになっていますが、実際には入力がフォーカスを取得するときにプレースホルダが消えます。 Chromeのプレースホルダでは、実際に何かを入力するまで、フォーカスに関係なく表示されました。 したがって、この場合、機能の検出は機能しません.IEを検出してラベルを表示する必要があります。

1
追加された
はい、確かに、バグの機能を呼び出すだけで、機能になります。
追加された 著者 Andrew Zhilin,
クロムでは、ラベルのない入力の小さなフォームを使用できます(情報が入力されるまでプレースホルダが表示されるため)。 IEでは、入力がフォーカスを取得するとすぐにプレースホルダが削除されます。私の場合、入力はページの読み込みに重点を置いているので、IEはsuxです。いつものように。
追加された 著者 Andrew Zhilin,
あなたは賭けをしたいですか?私は同じ説明でバグを説明することができます - 「正しく働いています。
追加された 著者 Andrew Zhilin,
それでも壊れているわけではありません。すべてが正しく機能しています。あなたはちょうどそれが動作するように好きではありません。あなたの答えは間違っていて、まったく誤解を招きます。
追加された 著者 Doug S,
IEのプレースホルダが正しく動作しています。あなたは間違っている。ケースが閉まった。
追加された 著者 Doug S,
??? IE11がプレースホルダをChromeとは異なる方法で処理するため、プレースホルダをサポートしているわけではありません。 IE11はプレースホルダをサポートしています。あなたが与える3つのコード例は、IE11で正しく動作しています。
追加された 著者 Doug S,

パーティーに少し遅れますが、jQueryやAngularJSを使用している場合は、プラグインを使用せずに上記の方法を単純化することができます。

jQuery

typeof $('<input>')[0].placeholder == 'string'

AngularJS

typeof angular.element('<input>')[0].placeholder == 'string'

小切手は、AngularJSがフードの下で jQlite を実行するのと非常によく似ています。

0
追加された

こんにちは、これは古い質問ですが、うまくいけば、これは誰かを助ける。

このスクリプトは、ブラウザのプレースホルダの互換性をチェックします。互換性がない場合は、代わりにvalue = ""フィールドをプレースホルダ付きのすべての入力フィールドに使用します。フォームが提出されると、何も入力されていなければ、入力を ""に戻します。

// Add support for placeholders in all browsers
var testInput = document.createElement('input');
testPlaceholderCompatibility = ('placeholder' in testInput);
if (testPlaceholderCompatibility === false)
{
   $('[placeholder]').load(function(){
        var input = $(this);
        if (input.val() == '')
        {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    });

    $('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });
}
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript