JavaScript的onfocus与onblur用法

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

首先，先看一下效果图

点击前

点击后

关键代码如下

<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

JavaScript的onfocus与onblur用法相关推荐

onfocus 事件onblur 事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
Javascript自定义事件功能与用法实例分析
原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述自定义事件很难 ...
详解 javascript中offsetleft属性的用法（转）
详解 javascript中offsetleft属性的用法转载 2015-11-11 投稿:mrr 我要评论本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
javaScript 中 call 函数的用法说明
javaScript 中 call 函数的用法说明 javaScript 中的 call() 是一个奇妙的方法,但也是一个让人迷惑的方法,先看一下官方的解释: call 方法请参阅应用于:Func ...
javascript里的document.all用法收集
javascript里的document.all用法从IE4开始IE的object model才增加了document.all[],来看看document.all[]的Description: ...
【JavaScript：语法】javascript函数定义以及常见用法
转载:javascript函数定义以及常见用法 javascript函数定义以及常见用法我们知道,js函数有多种写法,函数声明 ,函数表达式,Function式构造函数,自执行函数,包括Es6的箭头 ...
java鼠标js触发事件吗,JavaScript常见鼠标事件与用法分析
摘要:这篇JavaScript栏目下的"JavaScript常见鼠标事件与用法分析",介绍的技术点是"JavaScript.鼠标事件.鼠标.事件.用法.分析", ...
鼠标onfocus或onblur效果
<input type="text" name="" value="我是一个兵" id="test" /> ...
html中onfocus和onblur的使用
onfocus():鼠标点在onfocus所在的标签上面时 onblur():鼠标点在除onfocus所在标签的其他地方 form表单的的提交方式: 使用超链接提交: 先获取form标签,使用form ...
JS: onfocus和onblur事件应用举例
一. onfocus(获得焦点事件) 当一个文本框获得焦点时,它里面的文本就像"好123"网站上的百度搜索输入框那样全部被自动选中,这样的操作可以利用onfocus来实现. 以下的 ...

JavaScript的onfocus与onblur用法

JavaScript的onfocus与onblur用法相关推荐

最新文章

热门文章