Method 1:
A new feature based on HTML5 input tags-placeholder. In addition, the x-webkit-speech attribute enables voice input.
Copy codeThe Code is as follows:
<Div> <input type = "email" name = "email" spellcheck = "false" placeholder = "Mailbox" autofocus tabindex = "1" x-webkit-speech> </ div>
<Div> <input type = "password" name = "password" placeholder = "password" tabindex = "2"> </div>
Method 2:
Use span to simulate and locate the span, and use JS Keyboard Events to determine whether the content in the span is displayed or hidden.
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# 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, 0, 0, 0.1) 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> the highlighted 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>
<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>