jQuery를 사용하여 텍스트 상자를 클릭하는 데 헬퍼 텍스트를 표시하십시오

Question

텍스트 상자를 클릭 할 때 도우미 텍스트를 표시하고 싶습니다. 예 : 텍스트 상자를 클릭하면 무엇을 입력 해야하는지 말하면 도움이됩니다. 여기에 사용자 이름을 입력하십시오.

아래에 코드가 주어졌지만 텍스트를 시도했습니다 "사용자 이름 입력" 사라지고 있습니다. 초점이 다른 텍스트 상자로 변경 될 때까지 텍스트가 표시되기를 원합니다.

이 유형에 대한 코드를 제안하십시오.

<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

왜 CSS 디스플레이 속성을 조작하고 Fadein/Fadeout을 사용하는지 잘 모르겠습니다.

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