input textarea 포커스시 효과주기 정보
input textarea 포커스시 효과주기
관련링크
본문
샘플
http://jysoft.co.kr/sample/input_highlight/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
/* input 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;}
/* textarea css */
.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;}
추천
4
4
댓글 7개
감사합니다. 잘 활용하겠습니다.
이것도 좋은 정보 감사 드립니다.
참고로 혹시 네이버에서 쓰는
https://nid.naver.com/nidlogin.login?svctype=262144&url=http://m.naver.com/
예제 방법 아시나요 ? ^^ 아무것도 입력 안하면 포커스 돌아옴 입력하면 아이디 비번 없어짐 ;;
혹시 아시나요 ?
참고로 혹시 네이버에서 쓰는
https://nid.naver.com/nidlogin.login?svctype=262144&url=http://m.naver.com/
예제 방법 아시나요 ? ^^ 아무것도 입력 안하면 포커스 돌아옴 입력하면 아이디 비번 없어짐 ;;
혹시 아시나요 ?
<form onsubmit='return fsubmit();'>
<input type='text' name='mb_id'>
</form>
<script type='text/javascript'>
var fsubmit = function() {
// 입력된값이 없다면
if(!$.trim($('input[name=mb_id]').val())) {
// 포커스주기
$('input[name=mb_id]').val('').focus();
}
}
</script>
<input type='text' name='mb_id'>
</form>
<script type='text/javascript'>
var fsubmit = function() {
// 입력된값이 없다면
if(!$.trim($('input[name=mb_id]').val())) {
// 포커스주기
$('input[name=mb_id]').val('').focus();
}
}
</script>
오우 감사 합니다.^^ 짱 ~@
멋지네여
감사해요^^
이열 역시 jy소프트님이시군요 아주 깔쌈하고 좋습니다. 감사합니다. ㅎㅎ