눈

텍스트 필드 css 적용하기..

· 2009-06-29 (월) 11:06:58 · 3812 · 4

요즘 Focus된 필드는 색깔을 표시하고 Blur될때 다시 원상복귀되는 형태의
폼들이 많이 나오고 잇네요.. 머 네이버도 부분적으로 사용하고 있는거 같고..
소스는 간단합니당. ^^;;
<style type='text/css'>
.din{border:1px solid #FF0000;}
.dout{border:1px solid #000000;}
</style>
<form name='aaa'>
<input type=text name='' onfocus='input_focus(this);' class='dout'>
<input type=text name='' onfocus='input_focus(this);' class='dout'>
</form>
<script language='javascript'>
function input_focus(obj){
 $(obj).addClass('din')
  .removeClass('dout')
  .blur(function(){
  $(this).addClass('dout')
   .removeClass('din');
 });
}
</script>
onfocus 이벤트를 주어서 직접 컨트롤 하는 방법과
아래의 경우처럼 클래스 셀렉터를 이용해 전체적으로 컨트롤 하는 방법이 있습니다.
<input type=text name='' class='dout'>
<input type=text name='' class='dout'>
<script language='javascript'>
$(".dout").focus(function(){
 $(this).addClass('din')
  .removeClass('dout')
  .blur(function(){
   $(this).addClass('dout')
    .removeClass('din');
  });
});
</script>
뭐 장단점이 있겠지만 저는 아래걸 쓰고싶네요.. html코딩도 줄어들고..

좀 이거 아이러니 한게 제가 못 찾아서 그런지는 모르겠지만..
addClass와 removeClass를 같이 써야 한다는게 참 거시기 하네요..
단일지정 함수는 없는걸까요??
javascript의 className 요녀석을 써도 괜찮을거 같은데..

[이 게시물은 관리자님에 의해 2011-10-31 16:55:28 jQuery에서 이동 됨]
|

댓글 4개

좋은 팁 감사드립니다.

아랫부분은 속성을 바꿔주는 것으로 될 겁니다.

$(this).addClass('din').removeClass('dout')
->
$(this).attr("class","din");
좋은팁 감사합니다.
단간하게 :focus 속성으로도 가능합니다. ex) input:focus { border:1px solid #888; }
2011-07-21 (목) 20:57:51
오늘 한참찾았는데.. 드디어 찾았네요.
잘쓰겠습니다~
댓글을 작성하시려면 로그인이 필요합니다.

개발자팁

5,403건

개발과 관련된 유용한 정보를 공유하세요. 질문은 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
jQuery 09-08-14 조회 5,166
JavaScript 09-08-12 조회 3,118
정규표현식 09-08-12 조회 5,068
jQuery 09-07-24 조회 6,272
Flash 09-07-23 조회 5,395
JavaScript 09-07-22 조회 4,015
MySQL 09-07-22 조회 6,075
JavaScript 09-07-22 조회 5,285
기타 09-07-22 조회 2,562
기타 09-07-21 조회 2,478
jQuery 09-07-17 조회 4,115
기타 09-07-17 조회 3,583
기타 09-07-17 조회 2,831
JavaScript 09-07-15 조회 9,297
JavaScript 09-07-11 조회 2,717
기타 09-06-29 조회 3,813
jQuery 09-06-26 조회 5,700
jQuery 09-06-25 조회 4,199
기타 09-06-25 조회 3,123
jQuery 09-06-18 조회 7,150
JavaScript
[JavaScript]
09-06-17 조회 2,447
기타 09-06-15 조회 3,302
기타 09-06-15 조회 2,543
기타 09-06-15 조회 2,930
JavaScript
[JavaScript]
09-06-15 조회 3,013
기타 09-06-15 조회 2,969
기타 09-06-09 조회 3,869
JavaScript 09-05-29 조회 3,207
jQuery 09-05-16 조회 4,132
기타 09-05-14 조회 4,031