2011-11-08 3 views
1

웹상에는 대부분의 사이트에 검색 창이 있습니다. 이 검색 창 중 일부는 검색을 사용합니다 ... 검색 텍스트 상자에 커서가 설정되면이 텍스트가 표시되는 자리 표시 자 텍스트입니다. 이 작업은 jQuery와 관련이 있습니까? 그렇다면 어떻게 사용할 수 있습니까?"placeholder"에 어떤 jQuery 플러그인을 사용해야합니까?

답변

0

플러그인을 만들 필요가 없습니다.

당신은 .focus()와 .blur을 (바인드해야합니다) 입력 상자 초점

()는 (흐림 효과, 텍스트 상자를 지우) 아무것도 경우하면 기본값

에게 돌아 입력의 상태 이 데모를 확인하십시오.

http://jsfiddle.net/QvPCX/

HTML

<input type="text" name="search" id="search" value="Search.." /> 

JS

jQuery('input[name="search"]').focus(function() { 
     if (jQuery(this).val() == "Search..") { 
      jQuery(this).val(''); 
     } 
    }).blur(function() { 
     if (jQuery(this).val() == "") { 
      jQuery(this).val('Search..'); 
     } 
    }); 
2

틀이 호출 될 수 HTML5 기능. JavaScript (see proof)가 필요하지 않습니다. 다음과 같이 작동합니다 :

<input type="text" placeholder="search" name="search" /> 

here.

0

기본적으로이를 처리하는 새로운 placeholder 속성이 HTML5에 있습니다. 어떤 이유로 든 HTML5를 사용할 수없는 경우 여기에서 사용할 수있는 jquery 대체가 있습니다. http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

+0

HTML5를 기존 브라우저에서 사용하려면 어떻게해야합니까? 너의 코멘트를 위해 thz. – pico

+0

HTML5를 사용하려면 페이지의 doctype을 변경하면됩니다. 그러나 HTML5shiv 또는 파생 상품을 사용하지 않는 한이 방법으로 이전 브라우저에서 오류가 발생할 수 있습니다. 이전 브라우저를 지원해야하는 경우 게시 한 링크에서 jquery 메서드를 사용하는 것이 좋습니다. –