懸停圖標時如何使密碼文本框值可見

Question

大家好，

我有一個包含密碼字段的表單：

<input type="password" name="password" size="30" />

自然地，輸入文本將被 (*) 替換。

因此，如果用戶輸入123該框將顯示*** 。

到這里，它是直截了當的，但是......

現在，我想在密碼框旁邊添加一個小圖標，這樣當用戶將鼠標懸停在這個圖標上時，他就可以看到他到目前為止輸入的內容。

因此，當懸停時，該框將顯示123 ，當用戶離開該圖標時，該框應再次顯示*** 。

有沒有辦法用 JavaScript 做到這一點？ 另外，我正在使用 HTML 和 PHP。

編輯：

它真的不需要是一個圖標，它可以是一個復選框或一個按鈕......如果它可以在 CSS 中完成，我真的很感激知道如何

PS我用谷歌搜索並搜索了stackoverflow但沒有運氣

Answer 1

將鼠標移到文本框上並將其type更改為text時，您需要通過 javascript 獲取文本框。 移出時，您需要將其改回password 。 沒有機會在純 CSS 中做到這一點。

HTML：

<input type="password" name="password" id="myPassword" size="30" />
<img src="theicon" onmouseover="mouseoverPass();" onmouseout="mouseoutPass();" />

JS：

function mouseoverPass(obj) {
  var obj = document.getElementById('myPassword');
  obj.type = "text";
}
function mouseoutPass(obj) {
  var obj = document.getElementById('myPassword');
  obj.type = "password";
}

Answer 2

正如這些人所說，只需更改輸入類型。
但也不要忘記改回類型。

請參閱我的簡單 jquery 演示： http : //jsfiddle.net/kPJbU/1/

HTML：

<input name="password" class="password" type="password" />
<div class="icon">icon</div>

jQuery：

$('.icon').hover(function () {
    $('.password').attr('type', 'text');
}, function () {
    $('.password').attr('type', 'password');
});

Answer 3

我使用這一行代碼，它應該這樣做：

<input type="password"
       onmousedown="this.type='text'"
       onmouseup="this.type='password'"
       onmousemove="this.type='password'">

Answer 4

下面的完整示例。 我只是喜歡復制/粘貼:)

HTML

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
           <div class="panel panel-default">
              <div class="panel-body">
                  <form class="form-horizontal" method="" action="">

                     <div class="form-group">
                        <label class="col-md-4 control-label">Email</label>
                           <div class="col-md-6">
                               <input type="email" class="form-control" name="email" value="">
                           </div>
                     </div>
                     <div class="form-group">
                       <label class="col-md-4 control-label">Password</label>
                          <div class="col-md-6">
                              <input id="password-field" type="password" class="form-control" name="password" value="secret">
                              <span toggle="#password-field" class="fa fa-lg fa-eye field-icon toggle-password"></span>
                          </div>
                     </div>
                 </form>
              </div>
           </div>
      </div>
  </div>

CSS

.field-icon {
  float: right;
  margin-right: 8px;
  margin-top: -23px;
  position: relative;
  z-index: 2;
  cursor:pointer;
}

.container{
  padding-top:50px;
  margin: auto;
}

JS

$(".toggle-password").click(function() {
   $(this).toggleClass("fa-eye fa-eye-slash");
   var input = $($(this).attr("toggle"));
   if (input.attr("type") == "password") {
     input.attr("type", "text");
   } else {
     input.attr("type", "password");
   }
});

在這里試試： https : //codepen.io/anon/pen/ZoMQZP

Answer 5

在如下一行代碼中：

 <p> cursor on text field shows text .if not password will be shown</p> <input type="password" name="txt_password" onmouseover="this.type='text'" onmouseout="this.type='password'" placeholder="password" />

Answer 6

1 分鍾的谷歌搜索給了我這個結果。 看演示！

HTML

<form>
    <label for="username">Username:</label>
    <input id="username" name="username" type="text" placeholder="Username" />
    <label for="password">Password:</label>
    <input id="password" name="password" type="password" placeholder="Password" />
    <input id="submit" name="submit" type="submit" value="Login" />
</form>

jQuery

// ----- Setup: Add dummy text field for password and add toggle link to form; "offPage" class moves element off-screen
$('input[type=password]').each(function () {
    var el = $(this),
        elPH = el.attr("placeholder");
    el.addClass("offPage").after('<input class="passText" placeholder="' + elPH + '" type="text" />');
});
$('form').append('<small><a class="togglePassText" href="#">Toggle Password Visibility</a></small>');

// ----- keep password field and dummy text field in sync
$('input[type=password]').keyup(function () {
    var elText = $(this).val();
    $('.passText').val(elText);
});
$('.passText').keyup(function () {
    var elText = $(this).val();
    $('input[type=password]').val(elText);
});

// ----- Toggle link functionality - turn on/off "offPage" class on fields
$('a.togglePassText').click(function (e) {
    $('input[type=password], .passText').toggleClass("offPage");
    e.preventDefault(); // <-- prevent any default actions
});

CSS

.offPage {
    position: absolute;
    bottom: 100%;
    right: 100%;
}

Answer 7

嘗試這個 ：

在 HTML 和 JS 中：

 // Convert Password Field To Text On Hover. var passField = $('input[type=password]'); $('.show-pass').hover(function() { passField.attr('type', 'text'); }, function() { passField.attr('type', 'password'); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <!-- An Input PassWord Field With Eye Font-Awesome Class --> <input type="password" placeholder="Type Password"> <i class="show-pass fa fa-eye fa-lg"></i>

Answer 8

它的簡單 javascript。 使用切換輸入的type屬性完成。 檢查這個http://jsfiddle.net/RZm5y/16/

Answer 9

   <script>
       function seetext(x){
           x.type = "text";
       }
       function seeasterisk(x){
          x.type = "password";
       }
   </script>
  <body>
    <img onmouseover="seetext(a)" onmouseout="seeasterisk(a)" border="0" src="smiley.gif"   alt="Smiley" width="32" height="32">
   <input id = "a" type = "password"/>
 </body>

試試這個看看它是否有效

Answer 10

快速響應未在幾個兄弟上測試，適用於 gg chrome / win

-> 焦點事件 -> 顯示/隱藏密碼

<input type="password" name="password">

腳本jQuery

// show on focus
$('input[type="password"]').on('focusin', function(){

    $(this).attr('type', 'text');

});
// hide on focus Out
$('input[type="password"]').on('focusout', function(){

    $(this).attr('type', 'password');

});

Answer 11

<html>
<head>
</head>
<body>
<script>
function demo(){
    var d=document.getElementById('s1');
    var e=document.getElementById('show_f').value;
    var f=document.getElementById('show_f').type; 

    if(d.value=="show"){
        var f= document.getElementById('show_f').type="text";
        var g=document.getElementById('show_f').value=e;
        d.value="Hide";

    } else{
        var f= document.getElementById('show_f').type="password";
        var g=document.getElementById('show_f').value=e;
        d.value="show";
     }     
  }   
</script>   

<form method='post'>
Password: <input type='password' name='pass_f' maxlength='30' id='show_f'><input type="button" onclick="demo()" id="s1" value="show" style="height:25px; margin-left:5px;margin-top:3px;"><br><br>
<input type='submit' name='sub' value='Submit Now'>

</form>
</body>
</html>