Copy codeThe Code is as follows:
$ ("# Focus. input_txt"). each (function (){
Var thisVal = $ (this). val ();
// Determine whether the value of the text box is null. If there is a value, the prompt is hidden and displayed if there is no value.
If (thisVal! = ""){
$ (This). siblings ("span"). hide ();
} Else {
$ (This). siblings ("span"). show ();
}
// Focus input box Verification
$ (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 ();
// Determine whether the value of the text box is null. If there is a value, the prompt is hidden and displayed if there is no value.
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 ();
}
})
})
})
</Script>
<Style type = "text/css">
Form {width: 400px; margin: 10px auto; border: solid 1px # E0DEDE; background: # FCF9EF;
Padding: 30px; box-shadow: 0 1px 10px rgba (0.1, 0,) inset ;}
Label {display: block; height: 40px; position: relative; margin: 20px 0 ;}
Span {position: absolute; float: left; line-height: 40px; left: 10px; color: # BCBCBC; cursor: text ;}
. Input_txt {width: 398px; border: solid 1px # ccc; box-shadow: 0 1px 10px rgba (0, 0, 0, 0.1) inset;
Height: 38px; text-indent: 10px ;}
. Input_txt: focus {box-shadow: 0 0 4px rgba (255,153,164, 0.8); border: solid 1px # B00000 ;}
. Border_radius {border-radius: 5px; color: # B00000 ;}
H2 {font-family: ""; text-shadow: 1px 1px 3px # fff ;}
</Style>
</Head>
<Body>
<Form class = "border_radius" id = "focus">
<H2> If the highlighted prompt language disappears, refresh it. <Label> <span> huaban registration email </span> <input type = "text" class = "input_txt border_radius"/>
</Label>
<Label> <span> password </span> <input type = "text" class = "input_txt border_radius"/> </label>
</Form>
<Form class = "border_radius" id = "keydown">
<H2> the input prompt disappears. <Label> <span> huaban registration email </span> <input type = "text" class = "input_txt border_radius"/>
</Label>
<Label> <span> password </span> <input type = "text" class = "input_txt border_radius"/> </label>
</Form>
</Body>
</Html>