在做登录的时候,登录界面的文本框中会有一段文字,当鼠标点击文本框时,框内文字消失,当鼠标离开时,那行字又出现了,但当输入文本时那行字便不再显现,此特效是如何实现的呢?实现原理如下
首先,先看一下效果图
点击前
点击后
关键代码如下
<input type="text" name="username" value="请输入用户名" οnfοcus="this.value = '';" οnblur="if (this.value == '') {this.value = '请输入用户名';}"/>
这段代码中,有两个非常重要的方法:onfocus和onblur
官方释义
onfocus:事件在对象获得焦点时发生。
即当鼠标点击时,触发的事件,
onblur: 事件会在对象失去焦点时发生
即当鼠标点击另一处时所触发的事件
至此这个程序的大体流程清晰了:当鼠标点击文本框时,文本框获得焦点,触发onfocus,文本框中的值变为空,鼠标点击另外一处时,即文本框失去焦点,触发onblur事件,进行判断文本框的内容,若value="",则给value赋值请输入用户名。
具体代码如下
style.css
.clear{clear:both;}
.pos-relative{position:relative;}
img{max-width:100%;}
body{
font-family: 'Montserrat', sans-serif;
font-size: 100%;
background: url(../images/bbb.jpg)no-repeat;
background-size: cover;
}
.login-form{
padding:100px 0px 50px 0px;
}
.login-form h1{
font-size:2em;
color:#fff;
font-weight:800;
text-transform:uppercase;
text-align:center;
margin-bottom:2em;
/*-- w3layouts --*/
}
.top-login {
width: 130px;
height: 130px;
display: block;
-webkit-transform: rotate(45deg) translate3d(0, 0, 0);
-moz-transform: rotate(45deg) translate3d(0, 0, 0);
-ms-transform: rotate(45deg) translate3d(0, 0, 0);
-o-transform: rotate(45deg) translate3d(0, 0, 0);
transform: rotate(45deg) translate3d(0, 0, 0);
margin: 0 auto 4em;
background: #fff;
position: relative;
}
.top-login span{
border: 2px solid #F36;
width: 105px;
height: 105px;
display: block;
margin: 0px auto;
position: absolute;
top: 11px;
left: 11px;
}
.top-login span img{
-webkit-transform: rotate(-45deg) translate3d(0, 0, 0);
-moz-transform: rotate(-45deg) translate3d(0, 0, 0);
-ms-transform: rotate(-45deg) translate3d(0, 0, 0);
-o-transform: rotate(-45deg) translate3d(0, 0, 0);
transform: rotate(-45deg) translate3d(0, 0, 0);
margin: 20px 0 0 20px;
}
.login-top{
width: 460px;
display: block;
margin: 0 auto;
}
.login-ic {
background: rgba(255, 255, 255, 0.32);
margin-bottom:1.5em;
padding: 8px;
}
.login-ic i {
background: url(../images/m.png)no-repeat 6px 6px;
width: 38px;
height: 38px;
float: left;
display: inline-block;
}
.login-ic i.icon {
background: url(../images/l.png)no-repeat 6px 6px;
}
.login-ic input[type="text"],.login-ic input[type="password"] {
float: left;
background: none;
outline: none;
font-size: 15px;
font-weight: 400;
color: #fff;
padding: 10px 16px;
border: none;
border-left: 1px solid #fff;
width: 82%;
display: inline-block;
margin-left: 7px;
}
.log-bwn {
text-align: center;
}
.log-bwn input[type="submit"] {
font-size: 15px;
font-weight: 700;
color: #fff ;
padding: 13px 0;
background: #ff3366;
display: inline-block;
width: 100%;
outline:none;
border:2px solid #ff3366;
cursor:pointer;
text-transform:uppercase;
}
.log-bwn input[type="submit"]:hover{
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
border:2px solid #fff;
}
.top-login {
width: 90px;
height:90px;
margin: 0 auto 3em;
}
.top-login span img {
margin: 5px 0 0 5px;
}
.top-login span {
width: 75px;
height: 75px;
top: 5px;
left: 5px;
}
.login-form h1 {
margin-bottom: 1em;
font-size: 1.7em;
}
p.copy {
margin-top: 3em;
}
.login-form {
padding: 80px 0px 45px 0px;
}
.login-ic {
margin-bottom: 1em;
padding: 3px;
}
.log-bwn input[type="submit"] {
padding: 10px 0;
}
p.copy {
font-size: 0.8em;
}
body {
min-height: 672px;
}
}
@media (max-width:384px){
.login-top {
width: 340px;
}
.login-ic input[type="text"], .login-ic input[type="password"] {
width: 75%;
}
body {
min-height: 600px;
}
}
@media(max-width:320px){
.login-top {
width: 280px;
}
.login-ic input[type="text"], .login-ic input[type="password"] {
width: 70%;
}
.login-form {
padding: 50px 0px 45px 0px;
}
body {
min-height: 540px;
}
}
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>简单js代码</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
<div class="login-form">
<h1>登录</h1>
<div class="login-top">
<form>
<div class="login-ic">
<i ></i>
<input type="text" name="username" value="请输入用户名" οnfοcus="this.value = '';" οnblur="if (this.value == '') {this.value = '请输入用户名';}"/>
<div class="clear"> </div>
</div>
<div class="login-ic">
<i class="icon"></i>
<input type="password" value="Password" οnfοcus="this.value = '';" οnblur="if (this.value == '') {this.value = 'password';}"/>
<div class="clear"> </div>
</div>
<div class="log-bwn">
<input type="submit" value="登录" >
</div>
</form>
</div>
</div>
</body>
</html>
图片素材可直接到我的csdn下载页面,https://download.csdn.net/download/qq_34038368/10458846