Fatal编程技术网
  • javascript/
  • Javascript 如何使密码文本框值在悬停图标时可见

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

javascript jquery html css

Javascript 如何使密码文本框值在悬停图标时可见,javascript,jquery,html,css,Javascript,Jquery,Html,Css,大家好 我有一个带有密码字段的表单： <input type="password" name="password" size="30" /> 当然，输入文本将替换为（*） 因此，如果用户键入123，该框将显示*** 到目前为止，这是直截了当的，但是 现在，我想在密码框旁边添加一个小图标，这样当用户将鼠标悬停在这个图标上时，他可以看到到目前为止输入的内容 因此，在悬停时，框将显示123，当用户离开图标时，框应再次显示*** 有没有办法用JavaScript实现这一点？另外，我正在

大家好

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

<input type="password" name="password" size="30" />
当然，输入文本将替换为（*）

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

到目前为止，这是直截了当的，但是

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

因此，在悬停时，框将显示
123
，当用户离开图标时，框应再次显示
***

有没有办法用JavaScript实现这一点？另外，我正在使用HTML和PHP

编辑：

它实际上不需要是图标，可以是复选框或按钮。。。如果可以在CSS中完成，我真的很想知道如何

另外，我已经用谷歌搜索了stackoverflow，但是运气不好

当鼠标移动到文本框上时，你需要通过javascript获取文本框，并将其
类型更改为
文本。当您将其移出时，您将希望将其更改回
密码
。在纯CSS中不可能做到这一点

HTML:

谷歌搜索给了我1分钟的时间。请参见

HTML


它是简单的javascript。通过切换输入的
类型
属性完成。检查这个
正如这些人所说，只需更改输入类型。

但别忘了把字体改回去

请参阅我的简单jquery演示：

HTML:



函数见文本（x）{
x、 type=“text”；
}
函数见星号（x）{
x、 type=“密码”；
}



试试看它是否有效
我使用这一行代码，它应该可以：


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





试试这个：

在HTML和JS中：



//将密码字段转换为悬停时的文本。
var passField=$（'input[type=password]'）；
$（'.show pass'）.hover（函数（）{
attr（'type'，'text'）；
}，函数（）{
attr（'type'，'password'）；
})





函数demo（）{
var d=document.getElementById（'s1'）；
var e=document.getElementById（'show_f'）。值；
var f=document.getElementById（'show_f'）。类型；
如果（d.值=“显示”）{
var f=document.getElementById（'show_f'）。type=“text”；
var g=document.getElementById（'show_f'）。value=e；
d、 value=“隐藏”；
}否则{
var f=document.getElementById（'show_f'）。type=“password”；
var g=document.getElementById（'show_f'）。value=e；
d、 value=“show”；
}     
}   
密码：



完成下面的示例。我只是喜欢复制/粘贴：）

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>


JS


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

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



$(".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");
   }
});



在这里试试：
一种没有在几个Broser上测试过的快速响应，
在gg chrome/win上工作

->焦点事件->显示/隐藏密码


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



在一行代码中，如下所示：


文本字段上的光标显示文本。否则，将显示密码


您在搜索时使用了什么短语？输入类型密码可见为什么在Odin的名字中，当问题清楚地针对简单明了的JavaScript进行回答时，会出现jQuery混乱？它在chrome和Firefox中运行良好，但在IE上不起作用。。我已经安装了IE 10，这与IE 10配合得很好，我关闭了兼容性视图。那么旧的IEs呢？这是非常基本和低级的javascript，因此应该与非常旧的浏览器兼容。只有在设置
var a=document.getElementById（'a'）时才有效
全局之前它应该是
onmouseover
和
onmouseout
，我喜欢。以浏览器生成onmouseover事件的特定速度在editbox上移动鼠标指针，但没有足够的时间生成onmouseout并确保它保持纯文本模式。

   <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>



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



<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>



<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>



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

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



$(".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");
   }
});



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



// 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');

});