태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

input textarea 포커스시 효과주기

12년 전

여러가지 방법이 있겠지만 저는 아래의 방법을 사용합니다.

인풋박스의 스타일 클래스를 보통박스와 포커스가 들어간박스를 미리 생성해둡니다.

jquery를 이용하여 인풋박스에 커서가 맞춰지면 미리 생성해둔 스타일 클래스로 바뀌는 원리입니다.

HTML

<input type="text" class="inputbox" style="width:200px;" />
<textarea rows="10" cols="85" class="textbox" style="width:500px; height:200px;" ></textarea>

jQuery

$(function() {

    // input 테두리
    $('input.inputbox').focus(function() {
        $(this).addClass('focusbox');
    }).blur(function() {
        $(this).removeClass('focusbox');
    });

    // textarea 테두리
    $('textarea.textbox').focus(function() {
        $(this).addClass('focustextbox');
    }).blur(function() {
        $(this).removeClass('focustextbox');
    });

});

CSS

.inputbox,.focusbox {float:left; margin:0; height:auto; font-size:12px; color:#666;}.inputbox {padding:4px 1px 3px 5px; border-top:1px solid #b5b5b5; border-right:1px solid #ddd; border-bottom:1px solid #ddd; border-left:1px solid #b5b5b5;}.focusbox {padding:3px 0 2px 4px; border:2px solid #23adb2;}.textbox,.focustextbox {margin:0; width:539px; height:100px;}.textbox {padding:4px 1px 3px 5px; border-top:1px solid #b5b5b5; border-right:1px solid #ddd; border-bottom:1px solid #ddd; border-left:1px solid #b5b5b5;}.focustextbox {padding:3px 0 2px 4px; border:2px solid #23adb2;}

첨부 :

3696841043_XAK3uJBs_sprites(1).gif (985 Byte) (8)

추천 목록

번호	제목
2,255	마우스오버 롤링이미지를 jQuery로 변경하기
2,254	PHP 처리속도 올리기
2,253	input 박스에 안내문구 나타내기
	input textarea 포커스시 효과주기
2,251	css background sprites
2,250	Jquery 모음
2,249	오른쪽 마우스 클릭시 나타나는 메뉴
2,248	테이블 점선테두리 만들기
2,247	배경이미지 제어하기(고정하기)
2,246	글자 줄바꿈과 줄바꿈 금지
2,245	Input 박스에 사라지는 배경 넣기
2,244	텍스트 overflow
2,243	border-style속성의 값
2,242	Input 박스에 포커스 되었을때 스타일 변경
2,241	CSS Intro
2,240	CSS용어 정리
2,239	JavaScript Copy to Clipboard
2,238	부모dom 의 넓이에 따라 자동으로 넓이 조절하기
2,237	3D 입체 갤러리 (바람개비 느낌) 상,하,좌,우 드래그 가능
2,236	3D 입체 갤러리
2,235	아이폰, 안드로이드 바탕화면에 바로가기 만들기
2,234	웹호스팅 이용자가 업로드 용량 늘리기
2,233	이미지가 클 경우 테이블이 늘어났다가 줄어들때
2,232	cut - 문자열 자르기
2,231	PHP 코딩 스타일
2,230	국내IP 정보 조회하는 클래스(php)
2,229	php->xml 생성하는 class
2,228	socket이용한 타사이트 이미지 읽기
2,227	사이즈가 큰이미지 웹페이지 출력시 자동으로 사이즈 줄이기...
2,226	php로 작성한 간단 RSS2.0 리더