icloud.comのフォーム入力フィールド

Question

iCloudのように入力フィールドを作成するにはどうすればよいですか？

誰かが入力を開始するまでプレースホルダを保持します。これを達成するためのjQueryの方法はありますか？

Answer 1

あなたは今、私はあなたの問題を理解し、[OK]をplaceholder属性

<input type="text" id="user" name="user" placeholder="Please type your username" /> 

EDIT

を使用する必要があります。前のコードに応じて、あなただけのKeyDown結合しているかどうかを確認する必要があります値はユーザーの値またはデフォルト値です

$(document).ready(function(){ 
    $('#user').keydown(function(e){ 
     if($(this).val()=='Please enter your username'){ 
      $('#user').val(''); 
     } 
    }); 

    $('#user').focusout(function(){ 
     if($(this).val() == ''){ 
      $(this).val('Please enter your username'); 
     } 
    }); 
}); 

ここでテストしてください：http://jsfiddle.net/G7s9u/41/

Answer 2

ウォーターマークの機能を参照している可能性があります。

透かしは、通常、要素が空でフォーカスがない場合は、入力テキスト領域またはテキスト領域要素内に薄い灰色のテキストとして表示されます。これは、inputまたはtextarea要素が何に使われているか、または必要な入力の種類について、ユーザーにヒントを提供します。

watermark http://jquery-watermark.googlecode.com/svn/trunk/jquery-watermark/wiki/sample-watermark.png

これはあなたがjquery-watermarkに試してみるとよいでしょう事実である場合。これはネイティブに（それをサポートするブラウザで）HTML5 "placeholder"の機能をサポートし、他の/古いバージョンでは正常に機能が低下します。

注：その他の多くのプラグインがあります。 Googling 'jquery watermark'か'jquery placeholder'あなたがそれらを見つけましょう:)

注2：できるだけ互換性があるために、アップルはは、HTML5のplaceholder属性に依存しており、単にとき、重複のdivを非表示にするjQueryのを活用しません。ユーザは入力を開始する。

Answer 3

読む "jQueryを使って固定HTML5のプレースホルダの入力フィールド" - http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Answer 4

HTML5のプレースホルダー属性？

<input type="text" placeholder="Example Placeholder" />