web-dev-qa-db-ja.com

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

ユーザーのブラウザでサポートされている場合はコードでHTML5"placeholder"属性を使用し、それ以外の場合はフォームの上部にフィールド名を出力するだけです。しかし、ユーザーが使用しているブラウザーのバージョン/名前ではなく、プレースホルダーがサポートされているかどうかのみを確認したいです。

理想的には、私は次のようなことをしたいと思います

    <body>

     <script>

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

Imを除き、javascriptビットがわからない。ヘルプは大歓迎です！

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

jQuery-ized version を開始点として使用しました。 （期限が来たらクレジットを与えるだけです。）

79
Trott

あるいは単に：

if (document.createElement("input").placeholder == undefined) {
    // Placeholder is not supported
}
35
Nikita Gavrilov

GCする必要があるメモリ内に入力要素を作成しない別の方法：

if ('placeholder' in HTMLInputElement.prototype) {
    ...
}
7
probablyup

Modernizrを使用している場合は、次をすばやくキャッチします。

if(!Modernizr.input.placeholder){
  ...
}
6
beenhero

http://html5tutorial.info/html5-placeholder.php にそれを行うコードがあります。

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

3
mikel

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

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

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

2
Andrea Tamago

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

jQuery

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

AngularJS

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

AngularJSは内部で jQlite を実行するため、チェックは非常に似ています。

0
Boaz

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

このスクリプトは、ブラウザのプレースホルダーの互換性をチェックし、互換性がない場合、プレースホルダーを持つすべての入力フィールドで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
Josh