最近上课说了前端HTML和javascript,以前只是初略学习,现在需要做一个小项目,每个人写些页面,因为对前端不太了解,写起来很吃力啊。但是一点一点学习。
用的是bootstrap框架。做一个登陆页面,要实现输入框点击小眼睛可以看见密码明文。
如图,HTML代码是:
<form action="main.html" method="">
<div class="login cont_join row">
<h2 style="color:#003333;font:22px;strong">四方考试系统</h2>
<h4 style="color:#a86515;font:22px;strong">用户登录 </h4>
<div class="input-group form-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" placeholder="请输入用户名" required="required" maxlength="20">
<span class="glyphicon glyphicon-remove-circle form-control-feedback" style="display:inline-block;"></span>
</div>
<div class="input-group form-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="text" class="form-control" placeholder="请输入密码" required="required" maxlength="16">
<span class="glyphicon glyphicon-eye-close form-control-feedback"></span> <!--小图标元素-->
</div>
<button type="submit" class="btn btn-primary btn-block">登 录</button><br>
<small class="text-muted">没有账户?<a href="regist.html">点此注册</a><div style="display: inline-block;width: 20%;"></div>
<a href="temporary.html">临时账户</a></small><a href="temporary.html">找回密码</a>
</small>
</div>
</form>
可以看见,用的全是bootstrap的css。但是遇到一个问题鼠标移到眼睛那里没有变成小手,或者不用这个span,用span中加眼睛的图片用css把鼠标cursor: pointer;不是没有用,就是图片被input挡住,后来查看form-control-feedback属性的原码
.form-control-feedback {
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
pointer-events: none;
}
发现了
pointer-events: none;
原文链接:
http://caibaojian.com/pointer-events.html
CSS新属性pointer-events:字面理解是点击鼠标事件,值分别是auto和none。·
当使用pointer-events:none,表示它将捕获不到任何点击,而只是让事件穿透到它的下面。
来源: 前端开发博客
所以 把自己写一个属性,把pointer-events: auto;
.form-control-feedback-my{
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
pointer-events: auto;。
cursor: pointer;
}
这样鼠标挪到眼睛这里就会是小手,且可以点击获取事件。
密码变明文则是把type从password变成type;
span的class也要改变,因为眼睛的图片也是要改变的。