jqueryを使用して入力時にフォームの内容を変更する

Question

私はデフォルト値をクリックしないようにしようとしていますが、ユーザが入力を開始したとき（フィールドが何であるかを知るため）....問題

onfocusの代わりにonchangeを使用すると、入力を開始するときにデフォルト値が保持されます。私がやっていることを混乱させるなら、Facebookに行って、検索ボックスの仕組みを見てみてください。

<script> 

    function uFocus() { 
     $('#fakeusername').hide(); 
     $('#username').show(); 
     $('#username').focus(); 
    } 

    function uBlur() { 
     if ($('#username').attr('value') == '') { 
      $('#username').hide(); 
      $('#fakeusername').show(); 
     } 
    } 
</script> 
<input style='width:202px;height:25px;margin-top:8px;font-size:14px;color:gray;' type='text' name='fakeusername' id='fakeusername' value=' Username' onfocus='uFocus()' /> 
<input style='width:202px;height:25px;margin-top:8px;font-size:14px;color:#000000;display: none' type='text' name='username' id='username' value='' onblur='uBlur()' /> 

Answer 1

つのオプション：HTML5で

、placeholder属性を使用すると、不要JavaScriptで欲しいものをシミュレートします。

<input type='text' name='fakeusername' id='fakeusername' value='Username' placeholder='Type your username' /> 

2番目は、Facebookで使用されているアプローチは、サンプルテキストを含む背景イメージを空白に置き換えることです。したがって、2つの背景イメージを作成することができます（最初の文字は「入力したユーザー名」を入力に使用し、2番目の文字は空白にします）、入力がフォーカスされるたびに反転するように設定します。

Answer 2

は、あなたが探しているものは以下です：

$("#fakeusername").on({ 
    focus: function() { 
     $(this).css('color', '#000'); 
    }, 
    blur: function() { 
     $(this).css('color', 'grey'); 
    }, 
    keydown: function() { 
     if ($(this).val()==' Username') { 
      $(this).val(''); 
     } 
    } 
}); 

FIDDLE

Answer 3

ここで入力の上にラベルを配置し、クリックすると、ブラウザは、入力のデフォルトのフォーカスを行うことができるように、適切なfor/ID一致を必要とする方法がありますラベルに。ぼかしの入力値にラベルが再度表示されない場合は、入力の上にラベルを配置します。ラベルを使用するとアクセスできます

http://jsfiddle.net/UCxaZ/2