ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery フォームの取得とフォーカス入力ボックス プロンプトの喪失のコード例 Effects_jquery

jQuery フォームの取得とフォーカス入力ボックス プロンプトの喪失のコード例 Effects_jquery

WBOY
リリース: 2016-05-16 17:27:22
オリジナル
1091 人が閲覧しました
コードをコピー コードは次のとおりです:

$("#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;}



スパン>
text" class="input_txt border_radius" />

入力タイプのプロンプトが消える


/label>





関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート