在文本框中開始鍵入時的Jquery文本

Question

我希望當我開始在文本框中鍵入時， Forgot文本將其替換為View用戶可以查看他鍵入的密碼，如果密碼文本框為空，則顯示默認文本為Forgot 。 如果顯示View並使用單擊View鏈接然后在文本框中顯示文本或在Hide View替換，如果單擊Hide然后文本框文本變為密碼格式。我不熟悉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>