입력란에 오류/성공 메시지 표시

Question

이메일 입력란에 제출 버튼을 입력하라는 입력란이 있습니다. 다음은 그와 관련된 코드 :

HTML은

<div class="email"> 

    <form action="handler.php" method="post" id="hgb-signup"> 
    <input type="text" name="email" id="email" value="Enter your email address"> 
    <input type="submit" name="submit" id="submit" value="&raquo;" /> 
    </form> 

</div> 

JAVASCRIPT 현재 페이지가 #email 입력 필드가 읽기로드 할 때

Event.observe(window, 'load', function() { 
    jQuery('#email').focus(function() { 
     jQuery(this).val(''); 
    }); 
    jQuery("#hgb-signup").submit(function(e){ 
     var dataString = jQuery(this).serialize(); 
     jQuery('#email').val('Sending... please wait...'); 
     jQuery.getJSON('handler.php?callback=?', { 
      "sent_data": dataString }, 
      function(received_data) { 
       jQuery('#email').val(received_data.message); 
      } 
     ); 
     e.preventDefault(); 
    }); 
}); 

"당신의 이메일 주소를 입력" . 제출 버튼을 클릭하면 #email 값이 "보내기 ... 기다려주십시오 ..."로 덮어 쓰고 문제가 발생했는지 또는 제출이 성공했는지에 따라 #email 필드에 해당 메시지가 표시됩니다 이러한. 이제 입력 필드 내부를 클릭하면 "이메일 주소 입력"텍스트가 .val('')으로 사라지고 필드 외부를 클릭하면 해당 메시지가 사라집니다. 처음에는 메시지를 다시 입력하는 .blur()이 있었지만 사용자가 전자 메일 주소를 입력하고 제출을 누르면 실제 전자 메일 주소가 아니라 "전자 메일 주소 입력"을 제출했습니다. 제출 버튼 .blur()이 호출되었습니다.

이제 목표가 무엇인지 알면 .blur() 대안이 있고 그렇지 않은 경우 어떻게하면이 상황을 가장 잘 처리 할 수 ​​있을까요?

기본적으로, 여기에 내가 무엇을 찾고있다 :

#email 필드 읽고 커서가 필드 안에 있지 않을 때 주어진 시간에 "당신의 이메일 주소를 입력"다시 때 커서 잎을 제공해야한다 필드가 있지만, 사용자가 필드 안쪽을 다시 클릭하고 나뭇잎을 떠나지 않으면 양식이 제출 된 후 오류/성공 메시지가 거기에 머물고 싶습니다. 그러면 "이메일 주소 입력"이라고 다시 말할 수 있습니다.

감사합니다.

Answer 1

.blur()을 사용하십시오. 그러나 먼저 val()을 확인하십시오. 그것은 여기

jQuery('#email').blur(function() { 
    var $this = jQuery(this); 
    if ($this.val() == '') $this.val('Enter your email'); 
}); 

을 비어 당신을 위해 jsfiddle을 때만 "Enter your email"로 교체, 당신은 그것을 확인할 수 있습니다. 나는 또한 focus() 처리기에 수표를 추가하여 전자 메일을 입력 한 후 입력 필드를 클릭 할 때 내용을 제거하지 않을 것입니다.