blocks|key|158155|text|将鼠标移到文本框上时，需要通过javascript获取文本框，并将其type更改为text。在将其移出时，您需要将其更改回password。在纯CSS中不可能做到这一点。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|158156|HTML：|158157|<input+type="password"+name="password"+id="myPassword"+size="30"+/>
<img+src="theicon"+onmouseover="mouseoverPass();"+onmouseout="mouseoutPass();"+/>|code-block|syntax|javascript|158158|JS：|158159|function+mouseoverPass(obj)+{
++var+obj+=+document.getElementById('myPassword');
++obj.type+=+"text";
}
function+mouseoutPass(obj)+{
++var+obj+=+document.getElementById('myPassword');
++obj.type+=+"password";
}|158160|entityMap^0|Y|4|15|4|1P|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

<p>You will need to get the textbox via javascript when moving the mouse over it and change its <code>type</code> to <code>text</code>. And when moving it out, you will want to change it back to <code>password</code>. No chance of doing this in pure CSS.</p>

<p>HTML:</p>

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

<p>JS:</p>

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


blocks|key|2750569|text|用谷歌搜索1分钟，我得到了this+result。请看！|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2750570|HTML|2750571|<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>|code-block|syntax|javascript|2750572|jQuery|2750573|//+-----+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="'+%2B+elPH+%2B+'"+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
});|2750574|CSS|2750575|.offPage+{
++++position:+absolute;
++++bottom:+100%25;
++++right:+100%25;
}|2750576|entityMap|0|LINK|mutability|MUTABLE|url|http://www.mburnette.com/blog/toggle-password-field-text-visibility^0|D|B|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

<p>1 minute googling gave me <a href="http://www.mburnette.com/blog/toggle-password-field-text-visibility" rel="nofollow">this result</a>. See the <strong><a href="http://jsfiddle.net/WJ4kR/" rel="nofollow">DEMO</a></strong>!</p>

<p>HTML</p>

<pre><code>&lt;form&gt;
    &lt;label for="username"&gt;Username:&lt;/label&gt;
    &lt;input id="username" name="username" type="text" placeholder="Username" /&gt;
    &lt;label for="password"&gt;Password:&lt;/label&gt;
    &lt;input id="password" name="password" type="password" placeholder="Password" /&gt;
    &lt;input id="submit" name="submit" type="submit" value="Login" /&gt;
&lt;/form&gt;
</code></pre>

<p>jQuery</p>

<pre class="lang-js prettyprint-override"><code>// ----- 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('&lt;input class="passText" placeholder="' + elPH + '" type="text" /&gt;');
});
$('form').append('&lt;small&gt;&lt;a class="togglePassText" href="#"&gt;Toggle Password Visibility&lt;/a&gt;&lt;/small&gt;');

// ----- 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(); // &lt;-- prevent any default actions
});
</code></pre>

<p>CSS</p>

<pre class="lang-css prettyprint-override"><code>.offPage {
    position: absolute;
    bottom: 100%;
    right: 100%;
}
</code></pre>


blocks|key|2963094|text|它的简单的javascript。使用切换输入的type属性来完成。检查此http://jsfiddle.net/RZm5y/16/|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2963095|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/RZm5y/16/^0|N|4|10|T|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>Its simple javascript. Done using toggling the <code>type</code> attribute of the input. Check this <a href="http://jsfiddle.net/RZm5y/16/" rel="nofollow">http://jsfiddle.net/RZm5y/16/</a></p>


blocks|key|2750618|text|正如这些人所说，只要改变输入类型即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2750619|但是也不要忘了把类型改回来。|2750620|请看我的简单的jquery演示：http://jsfiddle.net/kPJbU/1/|offset|length|2750621|HTML：|2750622|<input+name="password"+class="password"+type="password"+/>
<div+class="icon">icon</div>|code-block|syntax|javascript|2750623|jQuery：|2750624|$('.icon').hover(function+()+{
++++$('.password').attr('type',+'text');
},+function+()+{
++++$('.password').attr('type',+'password');
});|2750625|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/kPJbU/1/^0|0|0|G|S|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@$F|13|G|14|1|15]]|A|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>As these guys said, just change input type.<br>
But do not forget to change type back as well.</p>

<p>See my simple jquery demo: <a href="http://jsfiddle.net/kPJbU/1/" rel="noreferrer">http://jsfiddle.net/kPJbU/1/</a></p>

<p>HTML:</p>

<pre><code>&lt;input name="password" class="password" type="password" /&gt;
&lt;div class="icon"&gt;icon&lt;/div&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>$('.icon').hover(function () {
    $('.password').attr('type', 'text');
}, function () {
    $('.password').attr('type', 'password');
});
</code></pre>


blocks|key|2750630|text|+++<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2750631|试试这个，看看有没有用|unstyled|2750632|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<p>Try this see if it works</p>


blocks|key|2750640|text|我使用这一行代码，它应该能做到这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2750641|<input+type="password"
+++++++onmousedown="this.type='text'"
+++++++onmouseup="this.type='password'"
+++++++onmousemove="this.type='password'">|code-block|syntax|javascript|2750642|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I use this one line of code, it should do it:</p>

<pre><code>&lt;input type="password"
       onmousedown="this.type='text'"
       onmouseup="this.type='password'"
       onmousemove="this.type='password'"&gt;
</code></pre>


blocks|key|158203|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|158204|在HTML和JS中：|158205|​|158206|//+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');
++})|code-block|syntax|javascript|158207|<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"/>

<input+type="password"+placeholder="Type+Password">
++++++<i+class="show-pass+fa+fa-eye+fa-lg"></i>|158208|158209|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Try This :</p>

<p>In HTML and JS :</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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');
  })</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
&lt;!-- An Input PassWord Field With Eye Font-Awesome Class --&gt;
&lt;input type="password" placeholder="Type Password"&gt;
      &lt;i class="show-pass fa fa-eye fa-lg"&gt;&lt;/i&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2963137|text|<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2963138|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script&gt;
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";
     }     
  }   
&lt;/script&gt;   

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

&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|2750660|text|完成下面的示例。我喜欢复制/粘贴:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2750661|HTML|offset|length|style|BOLD|2750662|<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>|code-block|syntax|javascript|2750663|CSS|2750664|.field-icon+{
++float:+right;
++margin-right:+8px;
++margin-top:+-23px;
++position:+relative;
++z-index:+2;
++cursor:pointer;
}

.container{
++padding-top:50px;
++margin:+auto;
}|2750665|JS|2750666|$(".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");
+++}
});|2750667|在这里试试：https://codepen.io/Loginet/pen/oNeevMe|2750668|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/Loginet/pen/oNeevMe^0|0|0|4|0|0|0|3|0|0|0|2|0|0|6|12|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@$D|16|E|17|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|19|8|@$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@$D|1E|E|1F|F|G]]|9|@]|A|$]]|$1|S|3|T|5|J|7|1G|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1H|8|@]|9|@$D|1I|E|1J|1|1K]]|A|$]]|$1|W|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<p>Complete example below. I just love the copy/paste :)</p>
<p><strong>HTML</strong></p>
<pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-md-8 col-md-offset-2&quot;&gt;
           &lt;div class=&quot;panel panel-default&quot;&gt;
              &lt;div class=&quot;panel-body&quot;&gt;
                  &lt;form class=&quot;form-horizontal&quot; method=&quot;&quot; action=&quot;&quot;&gt;

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

<p><strong>CSS</strong></p>
<pre><code>.field-icon {
  float: right;
  margin-right: 8px;
  margin-top: -23px;
  position: relative;
  z-index: 2;
  cursor:pointer;
}

.container{
  padding-top:50px;
  margin: auto;
}
</code></pre>
<p><strong>JS</strong></p>
<pre><code>$(&quot;.toggle-password&quot;).click(function() {
   $(this).toggleClass(&quot;fa-eye fa-eye-slash&quot;);
   var input = $($(this).attr(&quot;toggle&quot;));
   if (input.attr(&quot;type&quot;) == &quot;password&quot;) {
     input.attr(&quot;type&quot;, &quot;text&quot;);
   } else {
     input.attr(&quot;type&quot;, &quot;password&quot;);
   }
});
</code></pre>
<p>Try it here: <a href="https://codepen.io/Loginet/pen/oNeevMe" rel="nofollow noreferrer">https://codepen.io/Loginet/pen/oNeevMe</a></p>


blocks|key|159443|text|未在多个浏览器上测试的快速响应，适用于gg+chrome+/+win+%2Bedit:适用于Linux/Brave|type|unstyled|depth|inlineStyleRanges|entityRanges|data|159444|->+On+focus事件->显示/隐藏密码|159445|<input+type="password"+name="password">|code-block|syntax|javascript|159446|脚本jQuery|159447|//+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');

});|159448|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>A rapid response not tested on several browsers,
works on gg chrome / win +edit: ok on Linux/Brave</p>
<p>-&gt; On focus event -&gt; show/hide password</p>
<pre><code>&lt;input type=&quot;password&quot; name=&quot;password&quot;&gt;
</code></pre>
<p>script jQuery</p>
<pre><code>// show on focus
$('input[type=&quot;password&quot;]').on('focusin', function(){

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

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

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

});
</code></pre>


blocks|key|2750683|text|在下面的一行代码中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2750684|​|2750685|<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"+/>|code-block|syntax|javascript|2750686|2750687|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>In one line of code as below :</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt; cursor on text field shows text .if not password will be shown&lt;/p&gt;
&lt;input type="password" name="txt_password" onmouseover="this.type='text'"
       onmouseout="this.type='password'" placeholder="password" /&gt;</code></pre>
</div>
</div>
</p>


<p>Good day all,</p>

<p>I have a form that has a password field:</p>

<pre><code>&lt;input type="password" name="password" size="30" /&gt;
</code></pre>

<p>Naturally, the input text will be replaced by (*).</p>

<p>So if the user typed <code>123</code> the box will show <code>***</code>.</p>

<p>Up to here, it is straight forward, but...</p>

<p>Now, I wanna add a small icon next to the password box so when the user hover over this icon, he can see what he has entered so far.</p>

<p>So, while hovering, the box will show <code>123</code> and when the user leaves the icon the box should show <code>***</code> again.</p>

<p>Is there any way to do this with JavaScript? Also, I am using HTML and PHP.</p>

<p><strong>EDIT:</strong></p>

<p><strong>It really doesn't need to be an icon, it could be a checkbox or a button... AND if it could be done in CSS, I would really appreciate to know how</strong></p>

<p><em>P.S. I've googled and search the stackoverflow but with no luck</em></p>


how to make password textbox value visible when hover an icon

大家好，我有一个表单，它有一个密码字段：<input type="password" name="password" size="30" />当然，输入的文本将被替换为(*)。因此，如果用户键入123，则框中将显示***。到目前为止，一切都很简单，但是...现在，我想在密码框旁边添加一个小图标，以便当用户将鼠标悬停在该...

问如何在悬停图标时使密码文本框值可见
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在悬停图标时使密码文本框值可见EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在悬停图标时使密码文本框值可见
EN