JavaScript的onfocus与onblur用法

在做登录的时候，登录界面的文本框中会有一段文字，当鼠标点击文本框时，框内文字消失，当鼠标离开时，那行字又出现了，但当输入文本时那行字便不再显现，此特效是如何实现的呢？实现原理如下

首先，先看一下效果图

点击前

点击后

关键代码如下

<input type="text" name="username"  value="请输入用户名" onfocus="this.value = '';" onblur="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="请输入用户名" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '请输入用户名';}"/>
					<div class="clear"> </div>
				</div>
				<div class="login-ic">
					<i class="icon"></i>
					<input type="password"  value="Password" onfocus="this.value = '';" onblur="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

JavaScript的onfocus与onblur用法

猜你喜欢