Jquery text when start typing inside textbox

Question

I want when I Start typing in textbox then the Forgot text replace it to View to user can view what password he typing and if password textbox is blank then it show default text as Forgot. If show View and use click View link then show text in textbox or View replace in Hide and if click Hide then textbox text become password format.I am not familiar with jquery please any wanna help us how I make it.

My code is below:

 <div class="input_field">
                        <span><i class="fa fa-lock" aria-hidden="true"></i></span>
                       <input type="password" class="password" id="password" name="password" placeholder="Password" maxlength="30" minlength="8" autocomplete="new-password"/><a class="hyperlink link" href="forgot.com" id="link" style="float: right; margin-right: 5px;position: absolute;top: 7px;right: 0px;" title="I forgotten my password" >Forgot?</a></div>

Answer 1

If I don't misunderstood your requirements then this way you can try with keyup event,

let link = $('#link');
let password = $('#password');
password.keyup(function() {
  if (!!this.value) {
    $('#link').text('View');
  } else {
    $('#link').text('Forgot?');
  }

  link.click(function(e) {
    e.preventDefault();
    if (this.text === "View") {
      $("#password").attr('type', 'text');
      $('#link').text('Hide');
    } else {
      $("#password").attr('type', 'password');
      $('#link').text('View');
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_field">
  <span><i class="fa fa-lock" aria-hidden="true"></i></span>
  <input type="password" class="password" id="password" name="password" placeholder="Password" maxlength="30" minlength="8" autocomplete="new-password" /><a class="hyperlink link" href="forgot.com" id="link" style="float: right; margin-right: 5px;position: absolute;top: 7px;right: 0px;"
    title="I forgotten my password">Forgot?</a></div>

Answer 2

Change your html code similar code below. (add another anchor to toggle password visibility, and add data-l attribute to the anchorss for using in js code):

window.onload=function(){
   var links=document.querySelectorAll("[data-l]");
   var pass=document.querySelector("#password");
   pass.addEventListener("keyup", function(){
        links.forEach(function(l){
            l.style.display= !!pass.value.trim().length==(l.getAttribute("data-l")=="true")?"":"none";
         })
   });
   document.querySelector("[data-l='true']").addEventListener("click", function(){
      pass.type=pass.type=="password"?"text":"password";
      this.innerHTML = pass.type=="text" ? "Hide Password" : "Show Password";
   });
};

<div class="input_field">
  <span>
         <i class="fa fa-lock" aria-hidden="true"></i>
  </span>
  <input type="password" class="password" id="password" name="password" placeholder="Password" maxlength="30" minlength="8" autocomplete="new-password"/>
   <a class="hyperlink link" data-l="false" href="forgot.com" id="link" style=" margin-right: 5px;position: absolute;top: 7px;right: 0px;" title="I forgotten my password" >Forgot?</a>
   <a class="hyperlink link" data-l="true" href="javascript:;" id="link" style="display:none;margin-right: 5px;position: absolute;top: 7px;right: 0px;" title="toggle password" >Show Password</a>
</div>

---

New part: If you want to show eye icon instead of anchor's text, you can use code below:

window.onload=function(){
    var links=document.querySelectorAll("[data-l]");
   var pass=document.querySelector("#password");
   pass.addEventListener("keyup", function(){
        links.forEach(function(l){
             l.style.display= !!pass.value.trim().length==(l.getAttribute("data-l")=="true")?"":"none";
         })
   });
   document.querySelector("[data-l='true']").addEventListener("click", function(){
       pass.type=pass.type=="password"?"text":"password";
       this.setAttribute("data-tp", pass.type=="text" ? "hide" : "show");
   });
};

[data-tp='hide']{
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAPRSURBVGhD7ZpNqFVVGIZvZpaammkUERiikGZY/kwjoShKGzVI0YkOq5GgDQpDQQVTC5w0ybCQoJASKwKJKArNLHGiiElCNZAi0+zXyufJu+RztfY5+96uR/fhvPBwz1177bW/d++zvv2tdW9fTz11VtPguvMfm6tZ8AO8B40145PQxD/9NNaMQRt8MtJoM9fCu9AVZkbAO9A1ZnZB15jZCV1j5m3IzTiXGifNvAV1zIyEe+BxeAJW9uPnhTAbRsNlk2Z2QMnMXFgHe+BPiH1KnIX9sBHuhWHQUWnmTYhBnc5+HwzfwDNwI3RMJTM5v8Nh+BjegNfhffgSfoXSOfIzvACToCO6BnIzf4Ffr/ugVVbz3JmwHD4Ev2ZxHPFGONYoGFI9Crvhpn9/O6+SmcGk5ttgNZyAOJZ8DV77f2ssbIU08AGYCEntzPhzTj/tDC6AOE7kNRgDg5KZyDuSD/oFxElZZeZJ+DG0mRRWwdVQ0lVwCOI4kSNwNwxI5vtfIA60D9KFPocbIKlkpoqXoUoaTf28lteM5/4Gi6CWnoO/IZ3sZ/O974vv+tvkEYgaiBnfHSXdD6mP1/KamyCP51loqQ2QThAn4MOgfPTx2F2Qq66ZF6GkyRD7eU3lTfse4rHNkI5fkA0eiB2PwhRIcuLH4zdDSXXM+F4pyUQS+8UJPhWMKR73nXORGXN27PAZlAKNOf9OGyrUzsx6KMmldurzhw2ZjMnY4ljGfkG5ESfzLZDrW0h9HrKhharMOGG9uyU5Zupn2ZLLmIwtjneRER+P39vY4Tjkdz2uTZ63oY1KZg5C1RLAMVM/C9QoY8lfB1ugOE/MELHjSXgQkiwr0rGvoE7VWjJTWgL4fnHM1OcpSHoA4jtJNP0fE1FPQ0x31lBrYTjcCnGeLIY6qmNmCaRjzg/LIa+5BowhHTM2b2gtuSg6A+lk2QumXDNOavNRj4M6amVmPMSvzTaYDp+ENvkJHoMBaQbkJYN3yrI8trlBUVV25KoyEzc5vOOvghVw7OcSoCpJtNX1EIvGKrZD3aq3ZKYdL8FAq+qiLB3yl1GOXz2fYh3VNXMMYrIZErmp4LrhFJQuKk7KV2AeOFFbqbQHkEiV8iXdpJgAZhInXimIhOnyUzBYE4SrwQ8gVs2ayTcBTfm3Q8dkplkBrdYQJSzNczOlveaql+YllftYltYfgRsIMagSPqkYqJ8NPva5bGaSTMV3gHXTUkgbdMtgPpgQnOy5qswMSbbqtLrKjEH3zFyJ6pm5UtXVZvwTuuv7RiqZ0YT/1NBoaaaxT6KnBqqv7xy8PjUHNT8LeQAAAABJRU5ErkJggg==);
    background-size: 100%;
}
[data-tp='show']{
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANqSURBVGhD7dhNqJVFHMfxqxm28SUqU1fqwjIKjMR2qSEilIGSCKYupI22DAlKs8TMN8gSbVNqRhSGEK60dlGBC0FcCEIoki8LFYM0S836fuGM/J07zzme682rMD/4wLkz88zM89x55nnO6ampqampqampqbmvMgxT8BrewFstfrbsOdjmnssDmImPcQQ38G8H/+AwtuBF2MeAZRTW4SxKk+2GfayFfd61TMB2XEFpUrqMQziAb1r2t8qsKx2jP7EN4/G/ZQS24hryCfyN77EcT6PdUrFuEmzryf2FvD/HcKkOR79mPk4jH9Ayb+TH0Nd47Ao09f8q7jgjsRf5AMkMtMtDcAeTn9tlFkpjyDk4lz7FwY+j1LFc701x+byHP5Da+3k12i07d704RuRcnFNXeR1XETs6iKPh77fRlN2Ix0Y70JR3kNo5lmPGY72flqJjBmEN4sE+Fz7AEJxplWk6SpmGeHzJCyjFZ0pq4/3xINzi82eT/23nWowVnyIe4HKYC2N9rBuHUtzZYrsSd6RS3NpjuzTZeYjLVG7TvU7Ggk8QG56DrxMpboWx/lGU4jMjtiuxTSn2GdvFVxnn4pxivXO+5WQ+RGzwG55EnvgMKdWbTYh9lWxAKT5fUhvHymO9c4t9OfebyU/kFJ5CnrjXz7agkGfR7n3L96zJKMU+UzvnkMc5WR77u+VE/Pfka/s8nkfMPqT69RY0xPem2Ff0PpqyGanddxaEOJcLiH31WlrGAm+g2NAb7GWkvIlUdwyD0ZQlsE1svxhNsa9fkdo7VsocXEKqkxe+10nEvIu4NNL264NsLK4j1S1ApzzS0ikLkfp1jDFwzHz79fNK3Fa8mvnb7Y+YiD2hzCvYHy92vpCeQOrXMZ7AT6FMvjkvQlfxhsxfUTy5XYhXyEHb/os7xGO/RerPvnciv5BetKZNomMexteIHZZ8AZ/83cZjvkSpz+gr9PmlMeYV5Pt3zmXgcrjd+BzKl07OMV9Cv8Z7YSPafcNzOXyGqSgtN8us+xylL1SJY/jQ7PcvVjGj4Y8Gfi0tTSK5iB/g0pSff0epbWKfH+Fx3LW4PbpVn0RpUt1wx1oF+xyw+CDzqeurwi9ot2QS2/wMj2lahgOeoXgGbhDLkH6g87Nl/jhhm5qampqampqamvsiPT3/AVfe3H38IFoKAAAAAElFTkSuQmCC);
    background-size: 100%;
}

<div class="input_field">
  <span>
         <i class="fa fa-lock" aria-hidden="true"></i>
  </span>
  <input type="password" class="password" id="password" name="password" placeholder="Password" maxlength="30" minlength="8" autocomplete="new-password"/>
   <a class="hyperlink link" data-l="false" href="forgot.com" id="link" style=" margin-right: 5px;position: absolute;top: 7px;right: 0px;" title="I forgotten my password" >Forgot?</a>
   <a class="hyperlink link" data-l="true" href="javascript:;" id="link" style="display:none;margin-right: 5px;position: absolute;top: 7px;right: 0px;" title="toggle password" data-tp='show'></a>
</div>