HTML5「プレースホルダ」サポート

Question

ブラウザがHTML5プレースホルダタグをサポートしているかどうか調べることができます。そのため、jQueryプレースホルダプラグインをフックするかどうかを決めることができます。

Answer 1

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

変数placeholderSupportedはtrueになります。それ以外の場合は、falseに設定されます。

Answer 2

幅広いアイデアに行く取得するには：

http://caniuse.com/#search=placeholder

そして、あなたが行うことができますブラウザでテストするために：あなたはModernizrとyepnopeのようなサードパーティのライブラリを含めたい場合は

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

Answer 3

.jsでは、サポートをテストし、徐々に強化し、優雅に低下させるのは本当に簡単です。

これは役立つはず資源のたくさんの良い記事です：

return 'placeholder' in document.createElement('input'); 

http://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/

Answer 4

http://diveinto.html5doctor.com/everything.html#placeholderしかし、あなたが使用しているjQueryプラグインが既にネイティブサポートのためにチェックされる可能性があります - あなたはをかもしれませんはこれを自分で行う必要はありません。それがネイティブにサポートされている場合

Answer 5

私は上記の回答から借り、それは古い最近のブラウザだけでなく、IEとの後方互換性があるので、それを作った -

以下のコードを使用すると、「値」と「プレースホルダの両方を持っていることを確認してください'属性を入力フィールドに設定します。私の場合、私はIEの亜種をサポートする必要がありました。

説明 - ブラウザでプレースホルダがサポートされている場合、入力値は削除されます。そうでない場合、古いブラウザはプレースホルダ属性を無視し、下位のjsはデフォルトのプレースホルダ動作を模倣します。このスクリプトはCSRFの認証トークンも無視します（私のフォームでauthトークンの値がクリアされ、私のRailsアプリケーションでCSRF警告が発生するエラーが発生していました）。スクリプト自体を簡素化する

別のアプローチは、あなたが（具体的に以下の方法が少し乾燥しているが）、このスクリプトを利用し、それに応じて、真のステートメントを更新する各入力にクラスを割り当てることです。

var placeholderSupported = !!('placeholder' in document.createElement('input')); 

if (placeholderSupported === true){ 
    $('input:not([type="submit"], [name="authenticity_token"])').val(''); 
} else{ 
    $('input') 
     .focus(function() { 
      if (this.value === this.defaultValue) { 
       this.value = ''; 
      } 
     }) 
     .blur(function() { 
      if (this.value === '') { 
       this.value = this.defaultValue; 
      } 
    }); 
}