一.问题背景
html写表单提交时人，如用户名以及密码，type = "password"密码被隐藏，无法查看;type = "text"，密码被显示无法隐藏。代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>其他标签尝试</title>
</head>
<body>
<form action="firstPageTest.html" method="get">
用户名：<input type="text" ><br>
密码：<input type="password"/><br>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
edge浏览器在运行html时，会给type = "password"的input自动加上可以睁开或是闭上的眼睛图标，用来显示或隐藏密码。但是chrome不会，得自己封装实现。
（edge的效果）
二.实现思路
封装思路：
input标签没有小眼睛的图标，所以我们要加入小图标。
（1）父标签下包含input标签和小图标（两个小图标，一个隐藏一个可视）。父标签设置position：relative；属性。
（2）小图标设置position：absolute；属性，设置top、bottom、right、left等值调整到你想要的位置。
（3）js控制。给小图标定义点击事件，根据点击切换图标，同时切换type="text"和type="password"属性的input框。两个input框绑定同一个接收password值的字段。
