入力フィールドに最初の文字がありません

Question

私はこれら2つのほとんど同じ機能を使って、入力フィールドのキー入力イベントをキャッチし、その中のラベルをクリアします。しかし何らかの理由で、最初に入力した文字はパスワードフィールドには表示されず、ユーザー名フィールドに表示されます。これの原因は何でしょうか？

$("#username").keypress(function() 
{ 
    if($(this).hasClass("label")) 
    { 
    $(this).removeClass("label"); 
    $(this).val(""); 
    } 
}); 

$("#password").keypress(function() 
{ 
    if($(this).hasClass("label")) 
    { 
    $(this).removeClass("label"); 
    $(this).prop("type", "password"); 
    $(this).val(""); 
    } 
}); 

ここでは例を参照してください：https://jsfiddle.net/c0qdj1u3/

Answer 1

次の行には、バグの原因になっている：

$(this).prop("type", "password"); 

あなたがタイプされたパスワードとオフを開始した場合、それが正常に動作します。値を設定する代わりに、プレースホルダを使用します。以下を参照してください：

<input type="text" placeholder="Username" class="label" id="username"><br> 
<input type="password" placeholder="Password" class="label" id="password"> 

$("#username").keypress(function() 
{ 
    if($(this).hasClass("label")) 
    { 
    $(this).removeClass("label"); 
    $(this).val(""); 
    } 
}); 

$("#password").keypress(function() 
{ 
    if($(this).hasClass("label")) 
    { 
    $(this).removeClass("label"); 
    $(this).val(""); 
    } 
}); 

あなたが前の任意のタイピングにテキストボックスに何らかの値を持たなければならない場合は、jQueryの - プレースホルダのプラグインを使用してみてください。 https://github.com/mathiasbynens/jquery-placeholder