如何设置点击图标时可见的密码

Question

我有三个输入字段，它们都是密码字段，我想做的是在输入字段中放置 fontawesome 图标，点击它可以显示或隐藏密码

目前我有这个但是有按钮，它只对一个字段起作用而不对所有三个字段起作用，我必须为所有三个字段调用 3 个不同的函数还是可以用相同的函数完成

片段

function show() {
  var a = document.getElementById("confirm_password");
  var b = document.getElementById("display2");
  if (a.type == "password") {
    a.type = "text";

  } else {
    a.type = "password";

  }
}

<div class="col-lg-3">
  <h5 id="commonHeader">Current Password</h5>
  <input type="password" id="currentPass" name="currentpass" class="commanClass" placeholder="Current Password">
  <button type="button" onclick="show()" id="display"></button>
</div>
<div class="col-lg-3">
  <h5 id="commonHeader">New Password</h5>
  <input type="password" id="newPass" name="newpass" required="required" class="commanClass" placeholder="Current Password">
  <button type="button" onclick="show()" id="display1"></button>

</div>
<div class="col-lg-3">
  <h5 id="commonHeader">Confirm Password</h5>
  <input type="password" id="confirm_password" required="required" placeholder="Confirm Password">
  <button type="button" onclick="show()" id="display2"></button>
</div>

<div>
  <hr>
  <br>
  <button type="submit" id="save" class="commonButton">Save</button>
  <button type="button" id="save" class="commonButton">Clear</button>
</div>

在我的代码片段中，我有 3 个输入字段，我必须为所有输入字段提供一个图标，如果用户单击该图标，它将显示当前字段的密码

目前仅适用于一个领域

Answer 1

function show(inputId) {
  var a = document.getElementById(inputId);
  if (a.type === "password") {
    a.type ="text";

  } else {
    a.type ="password";

  }
}

.show-button{
  position:absolute;
  right:22px;
  top: 32px;
  border:0px;
  background-color:transparent;
}
input{
width:100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-12 ">
  <h5 id="commonHeader">Current Password</h5>
  <input type="password" id="currentPass" name="currentpass" class="commanClass" placeholder="Current Password">
  <button class="show-button" type="button" onclick="show('currentPass')" id="display"><i class="fa fa-eye"></i></button>
</div>
<div class="col-12">
  <h5 id="commonHeader">New Password</h5>
  <input type="password" id="newPass" name="newpass" required="required" class="commanClass" placeholder="Current Password">
  <button type="button" class="show-button" onclick="show('newPass')" id="display1"><i class="fa fa-eye"></i></button>

</div>
<div class="col-12">
  <h5 id="commonHeader">Confirm Password</h5>
  <input type="password" id="confirm_password" required="required" placeholder="Confirm Password">
  <button class="show-button" type="button" onclick="show('confirm_password')" id="display2"><i class="fa fa-eye"></i></button>
</div>

<div>
  <hr>
  <br>
  <button type="submit" id="save" class="commonButton">Save</button>
  <button type="button" id="save" class="commonButton">Clear</button>
</div>

在你的函数中传递输入的id就可以了。希望对你有帮助。

Answer 2

您可以使用 removeAttribute 删除 type="password" 并同时使用 setAttribute 将类型设置为文本

function show(a) {
  var x=document.getElementById(a);
  var c=x.nextElementSibling
  if (x.getAttribute('type') == "password") {
  c.removeAttribute("class");
  c.setAttribute("class","fas fa-eye");
  x.removeAttribute("type");
    x.setAttribute("type","text");
  } else {
  x.removeAttribute("type");
    x.setAttribute('type','password');
 c.removeAttribute("class");
  c.setAttribute("class","fas fa-eye-slash");
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="col-lg-3">
  <h5 id="commonHeader">Current Password</h5>
  <input type="password" id="currentPass" name="currentpass" class="commanClass" placeholder="Current Password">
  <i onclick="show('currentPass')" class="fas fa-eye-slash" id="display"></i>
</div>
<div class="col-lg-3">
  <h5 id="commonHeader">New Password</h5>
  <input type="password" id="newPass" name="newpass" required="required" class="commanClass" placeholder="Current Password">
 <i onclick="show('newPass')" class="fas fa-eye-slash" id="display"></i>

</div>
<div class="col-lg-3">
  <h5 id="commonHeader">Confirm Password</h5>
  <input type="password" id="confirm_password" required="required" placeholder="Confirm Password">
 <i onclick="show('confirm_password')" class="fas fa-eye-slash" id="display"></i>
</div>

<div>
  <hr>
  <br>
  <button type="submit" id="save" class="commonButton">Save</button>
  <button type="button" id="save" class="commonButton">Clear</button>
</div>

Answer 3

如果你想让它对所有人都是动态的，那么你需要在函数调用时传递文本框的 ID，然后你可以使用该 ID 动态地执行逻辑。

function show(id) {
  var a = document.getElementById(id);
  if (a.type == "password") {
    a.type = "text";

  } else {
    a.type = "password";

  }
}

<div class="col-lg-3">
  <h5 id="commonHeader">Current Password</h5>
  <input type="password" id="currentPass" name="currentpass" class="commanClass" placeholder="Current Password">
  <button type="button" onclick="show('currentPass')" id="display"></button>
</div>
<div class="col-lg-3">
  <h5 id="commonHeader">New Password</h5>
  <input type="password" id="newPass" name="newpass" required="required" class="commanClass" placeholder="Current Password">
  <button type="button" onclick="show('newPass')" id="display1"></button>

</div>
<div class="col-lg-3">
  <h5 id="commonHeader">Confirm Password</h5>
  <input type="password" id="confirm_password" required="required" placeholder="Confirm Password">
  <button type="button" onclick="show('confirm_password')" id="display2"></button>
</div>

<div>
  <hr>
  <br>
  <button type="submit" id="save" class="commonButton">Save</button>
  <button type="button" id="save" class="commonButton">Clear</button>
</div>

Answer 4

您可以使用将 inputElementId 作为参数的单个函数来实现此目的：

function show(inputElementId) {
  var a = document.getElementById(inputElementId);
  if (a.type == "password") {
    a.type = "text";

  } else {
    a.type = "password";

  }
}

你可以像这样调用它3次：

<div class="col-lg-3">
  <h5 id="commonHeader">Current Password</h5>
  <input type="password" id="currentPass" name="currentpass" class="commanClass" placeholder="Current Password">
  <button type="button" onclick="show(currentPass)" id="display"></button>
</div>
<div class="col-lg-3">
  <h5 id="commonHeader">New Password</h5>
  <input type="password" id="newPass" name="newpass" required="required" class="commanClass" placeholder="Current Password">
  <button type="button" onclick="show(newPass)" id="display1"></button>

</div>
<div class="col-lg-3">
  <h5 id="commonHeader">Confirm Password</h5>
  <input type="password" id="confirm_password" required="required" placeholder="Confirm Password">
  <button type="button" onclick="show(confirm_password)" id="display2"></button>
</div>

<div>
  <hr>
  <br>
  <button type="submit" id="save" class="commonButton">Save</button>
  <button type="button" id="save" class="commonButton">Clear</button>
</div>

如何设置点击图标时可见的密码

How to set password visible on click of icon

html

javascript

css

font-awesome-5