ホームページ > 記事 > ウェブフロントエンド > jQuery フォームの取得とフォーカス入力ボックス プロンプトの喪失のコード例 Effects_jquery
jQuery フォームの取得とフォーカス入力ボックス プロンプトの喪失のコード例 Effects_jquery
- WBOYオリジナル
- 2016-05-16 17:27:221029ブラウズ
コードをコピー コードは次のとおりです:
$("#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).兄弟("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">
form{width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;
境界線: 1px 高さ:40px;位置:相対;マージン:20px 0;}
スパン{位置:絶対;浮動小数:左;行の高さ:40ピクセル;左:10ピクセル;カラー:#BCBCBC;カーソル:テキスト;}
.input_txt{幅:398ピクセル;ボーダー:ソリッド 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;
.input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1ピクセル#B00000;}
.border_radius{border-radius:5px;color:#B00000;}
h2{ font-family:"Microsoft Yahei";text-shadow:1px 1px 3px #fff;}