Jquery 开始在文本框中输入时的文本

Question

我希望当我开始在文本框中输入内容时，Forgot 文本将其替换为 View，以便用户可以查看他输入的密码，如果密码文本框为空，则默认文本显示为 Forgot。如果显示 View 并使用单击 View link 然后在文本框中显示文本或 View 替换 Hide 如果单击 Hide 然后文本框文本变为密码 format.I 不熟悉 jquery 请任何想帮助我们的人帮助我。

我的代码如下：

 <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

如果我没有误解你的要求那么你可以尝试keyup事件，

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

更改您的 html 代码，类似于下面的代码。（添加另一个 anchor 以切换密码可见性，并将 data-l 属性添加到 anchors 以在 js 代码中使用：

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>

新部分：如果你想显示眼睛图标而不是 anchor 的文字，你可以使用下面的代码：

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>

Jquery 开始在文本框中输入时的文本

Jquery text when start typing inside textbox

html

javascript

jquery

textbox