The first of these methods：
New features based on HTML5 input tags-placeholder. In addition, the X-webkit-speech property can implement speech input functionality.
Copy Code code 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>
The second method：
With span simulation, positioning span, with the help of JS keyboard events to determine the input, determines the span of content display hidden.
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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 ();
To determine whether the value of the text box is empty, a value is hidden in the prompt, no value is displayed
if (thisval!= "") {
$ (this). Siblings ("span"). Hide ();
}else{
$ (this). Siblings (' span '). Show ();
}
Focused input Box validation
$ (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 ();
To determine whether the value of the text box is empty, a value is hidden in the prompt, no value is displayed
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;p adding: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: "Microsoft Ya Hei"; text-shadow:1px 1px 3px #fff;}
</style>
<body>
<form class= "Border_radius" id= "Focus" >
<label><span> Petals Registered Mailbox </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" >
<label><span> Petals Registered Mailbox </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>
