模拟网页中的显示和隐藏密码

在做一个项目的过程中，不仅仅只是后端代码，有时候要完成前端页面也是需要注重的，虽然是一些简单的样式，但是需要在用户的角度考虑是否方便的问题，例如下面要讲的一个小功能，很简单的一个小功能，但是也能方便用户，让用户体验更好。在网页中有时候输入密码的时候，我们经常能看到输入框的旁边会有只小眼睛，就是可以用来查看密码的，也就是方便用户检查密码，输入是否有误。下面就来看给简单的例子：

1、首先布局很简单，就是一个密码类型的输入框。代码如下图所示：

其中两个a标签就是两个小图标，引用了一个js插件（fontawesome-free-5.6.3-web/js/all.min.js），一个查看密码的眼睛和隐藏密码的眼睛。效果如下图所示：

<