> 웹 프론트엔드 > JS 튜토리얼 > jQuery 양식 획득 및 포커스 손실 입력 상자 프롬프트에 대한 예제 코드 effect_jquery

jQuery 양식 획득 및 포커스 손실 입력 상자 프롬프트에 대한 예제 코드 effect_jquery

WBOY
풀어 주다: 2016-05-16 17:27:22
원래의
1090명이 탐색했습니다.
코드 복사 코드는 다음과 같습니다.

$("#focus .input_txt").each( function() {
var thisVal=$(this).val();
//텍스트 상자의 값이 비어 있는지 확인합니다. 값이 있으면 프롬프트를 숨깁니다. ,
if(thisVal! =""){
$(this).siblings("span").hide();
}else{
$(this).siblings ("span").show();
}
//포커스 입력 상자 유효성 검사
$(this).focus(function(){
$(this).siblings("span" ).hide();
} ).blur(function(){
var val=$(this).val();
if(val!=""){
$( this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
});
})
$(" #keydown .input_txt").each(function(){
var thisVal=$(this).val();
// 텍스트 값을 결정합니다. 상자가 비어 있으면 프롬프트를 숨기고, 값이 없으면 표시됩니다.
if(thisVal!=""){
$(this).siblings("span" ).hide();
}else{
$(this).siblings("span").show();
}
$(this).keyup(function(){
var val=$(this).val();
$(this ).siblings("span").hide();
}).blur(function(){
var val =$(this).val();
if(val!="" ){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
})
})
})

<스타일 유형 ="text/css">
형식{width:400px;margin:10px auto;border:solid 1px #E0DEDE;배경:#FCF9EF;
                                        테두리: 실선 px                                                                       높이:40px;위치:상대;여백 :20px 0;}
범위{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;}
.input_txt{width:398px;border: 솔리드 1px #ccc; Box-Shadow : 0 1px 10px rgba (0,0,0,0.1) 삽입; .input_txt : Focus {Box-Shadow : 0 4px rgba (255,153,164,0.8); 경계 : 솔리드 1px #B00000;}
.border_radius{border-radius:5px;color:#B00000;}
h2{ 글꼴 계열:"Microsoft Yahei";text-shadow:1px 1px 3px #fff;}



span>                                                      text" class="input_txt border_radius" />

입력 유형 프롬프트가 사라짐


                                                                       | border_radius" />




관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿