요즘 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 요녀석을 써도 괜찮을거 같은데..
댓글 4개
아랫부분은 속성을 바꿔주는 것으로 될 겁니다.
$(this).addClass('din').removeClass('dout')
->
$(this).attr("class","din");
잘쓰겠습니다~
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 30 |
아우겐나이스
|
21년 전 | 4114 | |
| 29 |
아우겐나이스
|
21년 전 | 4490 | |
| 28 |
아우겐나이스
|
21년 전 | 3513 | |
| 27 | 21년 전 | 5894 | ||
| 26 | 21년 전 | 3171 | ||
| 25 | 21년 전 | 6148 | ||
| 24 | 18년 전 | 3704 | ||
| 23 | 21년 전 | 3699 | ||
| 22 | 21년 전 | 4289 | ||
| 21 | 21년 전 | 3877 | ||
| 20 | 21년 전 | 4287 | ||
| 19 | 21년 전 | 6733 | ||
| 18 | 21년 전 | 4781 | ||
| 17 | 21년 전 | 7027 | ||
| 16 | 21년 전 | 4223 | ||
| 15 | 21년 전 | 2682 | ||
| 14 | 21년 전 | 5018 | ||
| 13 | 21년 전 | 3443 | ||
| 12 |
Recluse
|
21년 전 | 3921 | |
| 11 |
아우겐나이스
|
21년 전 | 3606 | |
| 10 |
Recluse
|
21년 전 | 3445 | |
| 9 | 21년 전 | 4062 | ||
| 8 | 21년 전 | 5232 | ||
| 7 | 21년 전 | 4811 | ||
| 6 | 21년 전 | 5759 | ||
| 5 | 21년 전 | 4166 | ||
| 4 | 21년 전 | 4902 | ||
| 3 | 21년 전 | 4790 | ||
| 2 | 21년 전 | 3294 | ||
| 1 | 22년 전 | 4385 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기