jqueryを使用してテキストボックスをクリックしたときにヘルパーテキストを表示する

Question

テキストボックスをクリックすると、ヘルパーテキストが表示されます。 例：テキストボックスをクリックした場合、入力する内容を入力してください：ここにユーザー名を入力してください

指定されたコードの下で試しましたが、テキスト ＆quot;ユーザー名を入力＆quot; はフェードアウトしています。フォーカスが別のテキストに変更されるまでテキストを表示したいボックス。

このタイプのコードを提案してください。

<input type = "text"/><span>Enter username</span>
<input type = "text"/><span>Enter password</span>     


$(document).ready(function(){
    $("input").focus(function () {
         $(this).next("span").css('display','inline').fadeOut(1000);
    });
});

Answer 1

次のようなことが必要です

$(function(){
    $("input")
        .focus(function () {
            $(this).next("span").fadeIn(1000);
        })
        .blur(function () {
             $(this).next("span").fadeOut(1000);
        }); 
});

作業デモ

Answer 2

fadeIn / fadeOutを使用するだけでなく、CSS表示プロパティを操作している理由がわかりません：

$(document).ready(function(){
    $("input").focus(function () {
         $(this).next("span").fadeIn(1000);
    }).blur(function() {
        $(this).next("span").fadeOut(1000);
    });
});