Question

这个问题可能看起来非常基本。我在一个表单中有三个字段，我希望用户能够看到他在图像上悬停时所写的内容。适用于一个字段（＆＃34;输入旧密码＆＃34;）。我想对其他两个使用相同的Javascript函数（＆＃34;输入新密码＆＃34;，＆＃34;确认新密码＆＃ 34）

<form   action="changepw.php" method="post">
  <label>Enter Old Password</label>
  <input type="password" name="oldp" placeholder="old password" id="pw"     required>&nbsp;
  <img  src="\ExTrac\images\eye.png"  onmouseover="mouseoverPass();"     onmouseout="mouseoutPass();" >

  </br></br>

  <label>Enter New Password</label>
  <input type="password" name="newpw" placeholder="new password" id="npw"     required>&nbsp;
  <img  src="\ExTrac\images\eye.png"  onmouseover="mouseoverPass1();"      onmouseout="mouseoutPass1();" >

  </br></br>
  <label>Confirm New Password</label>
  <input type="password" name="cnewpw" placeholder=" confirm new password"    id="cpw" required>&nbsp;
  <img  src="\ExTrac\images\eye.png"  onmouseover="mouseoverPass2();" onmouseout="mouseoutPass2();" >

  </br></br>
  <input type="submit" value="Submit" class="style3">   
</form>

<script>
  document.getElementsByClassName("pw").onmouseover = function(){
    mouseoverPass(obj)
  };
  document.getElementsByClassName("pw").onmouseout = function() {  
    mouseoutPass(obj)
  };

  function mouseoverPass(obj) {
    var obj = document.getElementById("pw");
    obj.type = "text";
  }
  function mouseoutPass(obj) {
    var obj = document.getElementById("pw");
    obj.type = "password";
  }
</script>

Answer 1

要更改getElementsByClassName（复数）所带来的多个字段，您需要遍历集合

您当然还需要为图像提供课程pw

我添加了一个data-id属性，因此您可以将图像放在任何地方

我还将内联事件处理程序移动到窗口onload事件。

window.onload = function() {
  var pws = document.getElementsByClassName("pw"); // or document.querySelectorAll(".pw");
  for (var i = 0; i < pws.length; i++) {
    pws[i].onmouseover = function() {
      document.getElementById(this.getAttribute("data-id")).type = "text";
    }
    pws[i].onmouseout = function() {
      document.getElementById(this.getAttribute("data-id")).type = "password";
    }
  }
}

<form action="changepw.php" method="post">
  <label>Enter Old Password</label>
  <input type="password" name="oldp" placeholder="old password"  id="pw" required>&nbsp;
  <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Farm-Fresh_eye.png" class="pw" data-id="pw">
  </br>
  </br>
  <label>Enter New Password</label>
  <input type="password" name="newpw" placeholder="new password"  id="npw" required>&nbsp;
  <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Farm-Fresh_eye.png" class="pw" data-id="npw">
  </br>
  </br>
  <label>Confirm New Password</label>
  <input type="password" name="cnewpw" placeholder=" confirm new password" id="cpw" required>&nbsp;
  <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Farm-Fresh_eye.png" class="pw" data-id="cpw">
  </br>
  </br>
  <input type="submit" value="Submit" class="style3">

Answer 2

我建议您使用jQuery：

的JavaScript

$(".show-pw").mouseover(function(){
    this.type = "text";
}).mouseout(function(){
    this.type = "password";
});

HTML

<input type="password" name="oldp" placeholder="old password" id="pw" class="show-pw" required>
<input type="password" name="newpw" placeholder="new password" id="npw" class="show-pw" required>
<input type="password" name="cnewpw" placeholder=" confirm new password" id="cpw" class="show-pw" required>

Fiddle

PS。将class="show-pw"添加到所有输入。 DS。

Answer 3

使用class

querySelectorAll / getElementsByClassName

使用previousElementSibling获取当前元素的上一个元素
删除inline个事件监听器
使用[].forEach.call使用Array方法而不是具有length属性的对象

＆＃13;

var elems = document.querySelectorAll("form img.eye");
[].forEach.call(elems, function(el) {
  el.onmouseover = mouseoverPass;
  el.onmouseout = mouseoutPass;
});

function mouseoverPass() {
  this.previousElementSibling.type = "text";
}

function mouseoutPass() {
  this.previousElementSibling.type = "password";
}

＆＃13;

img {
  width: 30x;
  height: 20px;
  cursor: pointer;
}

＆＃13;

<form action="changepw.php" method="post">
  <label>Enter Old Password</label>
  <input type="password" name="oldp" placeholder="old password" id="pw" required>&nbsp;
  <img src="http://vignette1.wikia.nocookie.net/narutofanon/images/3/3d/Eye-Symbol_(1).png" class="eye">
  <br>
  <br>
  <label>Enter New Password</label>
  <input type="password" name="newpw" placeholder="new password" id="npw" required>&nbsp;
  <img src="http://vignette1.wikia.nocookie.net/narutofanon/images/3/3d/Eye-Symbol_(1).png" class="eye">
  <br>
  <br>
  <label>Confirm New Password</label>
  <input type="password" name="cnewpw" placeholder=" confirm new password" id="cpw" required>&nbsp;
  <img src="http://vignette1.wikia.nocookie.net/narutofanon/images/3/3d/Eye-Symbol_(1).png" class="eye">
  <br>
  <br>
  <input type="submit" value="Submit" class="style3">

＆＃13;

使用一个javascript函数为多个ID

3 个答案: