How to write the small eyes behind the password box?

 Problem: The small eyes that come with the password box sometimes disappear during the project process. After entering the password, move the mouse to other places and click and then move back. The small eyes disappear, and the plaintext password cannot be viewed.

Solution: Write a small eye by yourself to locate the input box.

        1. Define two input boxes, the types are text (password in clear text) and password (password in dark text), and ng-if is used to determine which box is currently hidden/displayed 

         2. Define a small eye icon after the input box, and click the event combined with the style control to display whether the eyes are open or closed

 

Angular writing

HTML code:

<div class="item" ng-init="pswShow = false">
    <span>
        <input type="text" class="text inline-block" ng-model="params.szPassword" ng-if="pswShow"/>
        <input type="password" class="text inline-block" ng-model="params.szPassword" ng-if="!pswShow"/>
        <span class="eye" ng-class="{true: 'open', false: 'close'}[pswShow]" ng-click="pswShow=!pswShow"></span>
    </span>
</div>

CSS code:

.eye{
  width: 16px;
  height: 14px;
  position: absolute;
  display: inline-block;
  cursor: pointer;
  left: 328px;
  top: 127px;
}
.eye.close {
  background: url(../images/pigsney-close.png) center center no-repeat;
}
.eye.open {
  background: url(../images/pigsney-open.png) center center no-repeat;
  background-color: #FFFFFF
}