实现密码输入框小眼睛的功能

最近上课说了前端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也要改变，因为眼睛的图片也是要改变的。