기존의 jQuery를 변경하여 스팬 자리 표시 자

Question

이 input 이름 및 ID와 일치하는 한 자리 표시자를 제공하는 일부 jQuery가 있습니다. 그러나 그 경우가 아니므로 자리 표시 자 대신 <span>을 대신 사용하기로 결정했습니다. 다른 사람이 내 jQuery를 변경하여 <span> 클래스를 "보유자"로 만들 수 있습니까? 목표는 자리 표시 자의 초점을 유지하고 입력이 있으면 사라지며 입력이 사라지면 다시 나타납니다.

<div id="placeholder"> 
    <span class="holder">This is the placeholder...</span> 
    <%= f.text_area :body, :id =>"Placeholder" %> 
</div> 

그리고 내 현재 jQuery를 :

여기 내가 사용하고있어 HTML입니다

$(document).ready(function() { 
    $('textarea').keyup(function() { 
     if ($(this).val().length) { 
      $('label[for="' + $(this).attr('name') + '"]').hide(); 
     } else { 
      $('label[for="' + $(this).attr('name') + '"]').show(); 
     } 
    }); 
}); 

감사합니다! 이 같은

Answer 1

뭔가 일을해야한다 : 그들은 span.holder 그들 앞에있는 경우

$(function() { 
    $("span.holder + textarea").keyup(function() { 
     if($(this).val().length) { 
      $(this).prev('span.holder').hide(); 
     } else { 
      $(this).prev('span.holder').show(); 
     } 
    });   
}); 

이 페이지의 모든 텍스트 영역에 대한 작동합니다.

Answer 2

focus 및 blur 이벤트에 바인딩하고 을 <textarea>에 절대 배치하려고합니다.

#placeholder { 
    position: relative; 
} 

.holder { 
    position: absolute; 
    top: 2px; 
    left: 2px; 
    display: none; 
} 

을 그리고 다음 jQuery를 : 일부 CSS 시작

이

$('.holder').click(function() { 
    $(this).siblings('textarea').focus(); 
}); 
$('#Placeholder').focus(function() { 
    $(this).siblings('.holder').hide(); 
}); 
$('#Placeholder').blur(function() { 
    var $this = $(this); 
    if($this.val().length == 0) 
     $(this).siblings('.holder').show(); 
}); 
$('#Placeholder').blur(); 

마지막 $('#Placeholder').blur() 호출이 올바른 상태가됩니다되도록 <span>의 상태를 초기화가있는 <textarea> 시작하면 콘텐츠로 나가십시오.

그리고 빠른 데모 : http://jsfiddle.net/ambiguous/PLrf3/1/

이 BTW, 같은 페이지에 id="placeholder" 및 id="Placeholder"을 가진 것은 혼란을 초래할 수 있습니다. id 속성에 대해 표준 스키마 (camelCase, words-and-hyphens 또는 그 이상)를 선택하고 선택하는 것이 좋습니다. 단지 사례 차이가 혼란 스러울 수 있으며 오타처럼 보일 수 있습니다.