jQuery/DOM&jQuery
입력 검색 폼(form) 꾸미기
샷타이거
2010. 2. 22. 13:41
간단한 검색 폼
간단한폼을 만들어보고 jQuery를 이용하여 label의 텍스트가 검색폼에 들어가게하여 라인을 줄여볼것이다.
css에서 label을 블럭 엘리먼트로 변경해준다.
label{ display:block;}
그러면 흔히 볼수있는 다음과 같이모습을 볼수있을것이다.
한라인 줄이기
위의 결과물은 label엘리먼트가 한블럭 차지하여 혹시사이트가 작은공간을 요구할때 불편사항을 줄수도있다.따라서 css변화를 주어 겹치게할것이다.
var $search = $('#search').addClass('overlabel');
html에서 클래스를 그냥주지않고 위와같이 jQuery를이용한것은 후에 별도로 같은 구문을 사용할 필요가있기에 변수로 지정해준것이다.그리고 css는 다음과 같다.
.overlabel{ position: relative;} .overlabel label{ position:absolute; top:1px; left:3px; cursor:text;}
원하는 결과가 나올것이다.하지만 다음과 같은 문제점이 발생한다.
- label의 텍스트"입력하시오"와 사용자가 입력할 텍스트가 겹치게된다
- label이 검색필드위에있기에 브라우저에 따라 마우스만으로 입력필드에 이동할 수 없을 경우도있다.
문제점해결
첫번째 문제를 위해 필드에 포커스가 올 때 감춰줄 필요가 있다
$(document).ready(function() { var $search = $('#search').addClass('overlabel'); var $searchInput = $search.find('input'); var $searchLabel = $search.find('label'); $searchInput .focus(function() { //포커스되면 $searchLabel.hide(); //보여준다 }) .blur(function() { if (this.value == '') { $searchLabel.show(); } }); });
각 엘리먼트를 변수로 지정해 주었고 input엘리먼트에 텍스트를 입력할 경우 원래 텍스트를 감추고 반대로 떠나면 다시 보여주게 하고있다. 다음에는 레이블을 클릭시 이벤트를 발생할 수 있도록 하는 것이다.
$searchLabel.click(function() { $searchInput.trigger('focus');
마무리
거의 다되었지만 하나남은것이있다. 위와같이할 경우 페이지를 새로고침하면 입력하던 텍스트값이 남아있도록할 필요가있다.
if ($searchInput.val()) { //입력한 값이 남아 있다면 $searchLabel.hide(); }
만약반대로 새로고침 할 경우 "입력하세요"가 나오게 하려면 null값을 주면 된다
if ($searchInput.val()) { $searchInput.val(null); }
이로서 완성. 완성된 페이지를 보려면 여기로 http://sianasiatiger.cafe24.com/study/F_searchform.html