如何在悬停图标时使密码文本框的值可见 [英] how to make password textbox value visible when hover an icon

问题描述

美好的一天，

我有一个有密码字段的表单

< input type =passwordname =passwordsize =30/>

将被（*）

替换，因此如果用户键入 123 ，那么该框将显示 ***

直到此处为止......但是

现在，我想在密码框旁边添加一个小图标，这样当用户将鼠标悬停在此图标上时，他可以看到他到目前为止输入的内容。

当鼠标悬停在该框中时，该框将显示 123 ，并且当用户将鼠标悬停在该图标上时，该框应显示 *** 再次

有什么方法可以用JavaScript来做到这一点？另外，我正在使用html和php

编辑：

它真的不需要是图标，它可以是一个复选框或一个按钮......如果它可以在CSS中完成，我真的很感激

预先感谢...

PS我已经使用Google搜索并搜索了stackoverflow，但没有运气

您需要通过javascript获取文本框将鼠标移到它上面并将其类型更改为 text 时。当它移出时，你会想把它改回 password 。

HTML：

  < input type =passwordname =passwordid =myPasswordsize =30/> 
< img src =theicononmouseover =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 =密码; 
} 
  

good day all,

I have a form that has a password field

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

Naturally, the input text will be replaced by (*)

so if the user typed 123 the box will show ***

up to here is straight forward... but

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

So, with hover in, the box will show 123 and when the user hover out the icon... the box should show *** again

Is there any way to do this with JavaScript? also, I am using html and php

EDIT:

It is really doesn't need to be icon, it could be a checkbox or a button... AND if it could be done in CSS I really appreciate to know how

Thanks in advance...

P.S. I've googled and search the stackoverflow but with no luck

解决方案

You will need to get the textbox via javascript when moving the mouse over it and change its type to text. And when moving it out, you will want to change it back to password. No chance of doing this in pure 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";
}

这篇关于如何在悬停图标时使密码文本框的值可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！