参考:
密码框的明密文(显示和隐藏) 显示
可以直接拿来用的:
Sample1:
https://nauvalazhar.github.io/my-login/index.html
Sample2:
https://nauvalazhar.github.io/my-login/index.html
Sample2与现有代码集成:
<input type="password" id="inputPassword2" name="password" class="form-control" placeholder="Password" data-toggle="password" required>
<input type="password" id="inputPassword4" name="password" class="form-control" placeholder="Password" data-toggle="password" required>
暂时还有bug,当密码为隐藏状态时,右侧的小眼睛会把比密码框更高,但是密码为显示状态时并不会有这个问题。
显示的显示效果如下:
![](https://images2018.cnblogs.com/blog/755565/201804/755565-20180424114647404-54605424.png)
此登录页面的源码来自以下https://v3.bootcss.com/examples/signin/,我将其放至了Thymeleaf框架中。