요즘 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");
잘쓰겠습니다~
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2430 | 15년 전 | 2503 | ||
| 2429 | 15년 전 | 5495 | ||
| 2428 | 15년 전 | 1460 | ||
| 2427 |
Sizkein
|
15년 전 | 4227 | |
| 2426 | 15년 전 | 1354 | ||
| 2425 | 15년 전 | 1649 | ||
| 2424 | 15년 전 | 1617 | ||
| 2423 |
haejuksun
|
15년 전 | 1610 | |
| 2422 |
haejuksun
|
15년 전 | 1118 | |
| 2421 |
haejuksun
|
15년 전 | 1362 | |
| 2420 |
haejuksun
|
15년 전 | 1509 | |
| 2419 |
 프리웹닷컴 |
15년 전 | 1404 | |
| 2418 |
프리웹닷컴 |
15년 전 | 2131 | |
| 2417 |
원더풀라입
|
15년 전 | 1280 | |
| 2416 |
원더풀라입
|
15년 전 | 1330 | |
| 2415 |
원더풀라입
|
15년 전 | 875 | |
| 2414 |
원더풀라입
|
15년 전 | 994 | |
| 2413 |
원더풀라입
|
15년 전 | 955 | |
| 2412 |
원더풀라입
|
15년 전 | 920 | |
| 2411 |
원더풀라입
|
15년 전 | 869 | |
| 2410 |
원더풀라입
|
15년 전 | 925 | |
| 2409 |
원더풀라입
|
15년 전 | 1075 | |
| 2408 |
원더풀라입
|
15년 전 | 1082 | |
| 2407 |
원더풀라입
|
15년 전 | 2605 | |
| 2406 |
원더풀라입
|
15년 전 | 941 | |
| 2405 |
원더풀라입
|
15년 전 | 1594 | |
| 2404 |
원더풀라입
|
15년 전 | 1461 | |
| 2403 | 15년 전 | 1587 | ||
| 2402 | 15년 전 | 1291 | ||
| 2401 |
나도빌더만들까
|
15년 전 | 1772 | |
| 2400 | 15년 전 | 594 | ||
| 2399 | 15년 전 | 1084 | ||
| 2398 | 15년 전 | 1049 | ||
| 2397 | 15년 전 | 2837 | ||
| 2396 | 15년 전 | 3151 | ||
| 2395 | 15년 전 | 1828 | ||
| 2394 | 15년 전 | 1336 | ||
| 2393 |
gamebomb
|
15년 전 | 1956 | |
| 2392 |
gamebomb
|
15년 전 | 1464 | |
| 2391 |
gamebomb
|
15년 전 | 1062 | |
| 2390 | 15년 전 | 3760 | ||
| 2389 |
leadK
|
15년 전 | 1405 | |
| 2388 |
kim7031
|
15년 전 | 1507 | |
| 2387 | 15년 전 | 2731 | ||
| 2386 | 15년 전 | 1436 | ||
| 2385 | 15년 전 | 4164 | ||
| 2384 |
확실한방법
|
15년 전 | 2370 | |
| 2383 |
intel
|
15년 전 | 3148 | |
| 2382 |
확실한방법
|
15년 전 | 1757 | |
| 2381 |
 RINIX |
15년 전 | 1989 | |
| 2380 |
RINIX |
15년 전 | 1299 | |
| 2379 | 15년 전 | 4373 | ||
| 2378 | 15년 전 | 3944 | ||
| 2377 |
메가팩토리
|
15년 전 | 3771 | |
| 2376 | 15년 전 | 5180 | ||
| 2375 | 15년 전 | 3404 | ||
| 2374 | 15년 전 | 1786 | ||
| 2373 | 15년 전 | 1744 | ||
| 2372 | 15년 전 | 1888 | ||
| 2371 | 15년 전 | 1591 | ||
| 2370 | 15년 전 | 3988 | ||
| 2369 | 15년 전 | 2898 | ||
| 2368 | 15년 전 | 2094 | ||
| 2367 | 15년 전 | 1663 | ||
| 2366 | 15년 전 | 1903 | ||
| 2365 | 15년 전 | 2382 | ||
| 2364 | 15년 전 | 1473 | ||
| 2363 | 15년 전 | 2407 | ||
| 2362 | 15년 전 | 1728 | ||
| 2361 | 15년 전 | 1823 | ||
| 2360 | 15년 전 | 1471 | ||
| 2359 | 15년 전 | 2165 | ||
| 2358 | 15년 전 | 1496 | ||
| 2357 |
 JY소프트 |
15년 전 | 1915 | |
| 2356 |
헐크매니아
|
15년 전 | 2114 | |
| 2355 |
WebRIA
|
15년 전 | 1189 | |
| 2354 |
WebRIA
|
15년 전 | 1240 | |
| 2353 |
WebRIA
|
15년 전 | 1886 | |
| 2352 |
WebRIA
|
15년 전 | 5329 | |
| 2351 | 15년 전 | 1626 | ||
| 2350 |
WebRIA
|
15년 전 | 2139 | |
| 2349 | 15년 전 | 2340 | ||
| 2348 |
WebRIA
|
15년 전 | 1487 | |
| 2347 |
WebRIA
|
15년 전 | 1296 | |
| 2346 |
WebRIA
|
15년 전 | 2214 | |
| 2345 |
WebRIA
|
15년 전 | 4935 | |
| 2344 | 15년 전 | 2201 | ||
| 2343 | 15년 전 | 2862 | ||
| 2342 | 15년 전 | 1749 | ||
| 2341 | 15년 전 | 3592 | ||
| 2340 | 15년 전 | 4427 | ||
| 2339 | 15년 전 | 3111 | ||
| 2338 | 15년 전 | 2353 | ||
| 2337 | 15년 전 | 2433 | ||
| 2336 | 15년 전 | 2684 | ||
| 2335 | 15년 전 | 2165 | ||
| 2334 |
Sizkein
|
15년 전 | 5505 | |
| 2333 | 15년 전 | 3370 | ||
| 2332 | 16년 전 | 1353 | ||
| 2331 | 16년 전 | 1695 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기