後方互換性を念頭に置いてHTML5プレースホルダ属性を使用するにはどうすればよいですか？

Question

HTML5のプレースホルダ属性を使用したいと思います（ニュースレターのカチオンではThought Resultsです）。しかし、古いブラウザーを使用すると、もちろんレンダリングされません。私はそれを模倣するためにJavaScriptを使用することができますが、私はそれを使用すべきではありませんし、それは古い方法で行われます。 HTML5のプレースホルダーの両方の属性を持つことができますが、それと同時に古いブラウザーでもシミュレーションできますか？

Answer 1

ブラウザが属性をサポートしている場合は、検出することができます：

http://diveintohtml5.info/detect.html#input-placeholder

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

それは、何もしないならば。そうでない場合は、JSを使用してプレースホルダの値を取得し、それをフィールドに挿入し（おそらくデフォルト値として）、適切なインタラクションを追加してHTML5プレースホルダの動作をシミュレートします。

Answer 2

@marcggは、JQueryプレースホルダプラグインを作成しました。このプラグインは、基本的には、サポートしていないブラウザのプレースホルダ機能を複製します。

https://github.com/marcgg/Simple-Placeholder

私はこの1つに決める前に、プレースホルダのプラグインの多くを通じて検索し、それがこれまでに素晴らしい作品。もともとこの類似した質問への回答でそれを見つけた：私はこの機能を検出するためのModernizrを使用することをお勧めします

https://stackoverflow.com/questions/5120257/what-is-the-best-html5-placeholder-like-jquery-plugin-out-there

Answer 3

。

if (Modernizr.input.placeholder) { 
    // your placeholder text should already be visible! 
} else { 
    // no placeholder support :(
    // fall back to a scripted solution 
} 

このライブラリを使用することに興味がない場合は、次のコードを使用できます。

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

あなたがStackOverflowでここにその起源を持っていたSimple Placeholderを、使用することができますjQueryのを使用している場合は、サポートをフォールバックすることについて。