javascript - 如何设置密码在单击图标时可见
问题描述
我有三个输入字段,它们都是密码字段,我要做的是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 个输入字段,我必须提供一个图标,如果用户单击该图标,它将显示当前字段的密码
目前它仅适用于一个领域
解决方案
您可以使用 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>
推荐阅读
- javascript - 在 iFrame 中将两个 contentWindows 打印为一个
- android - 迁移自动生成主键
- javascript - 浏览器在完全加载之前执行 JavaScript 文件
- amazon-web-services - boto3 给出 403:我们是否需要修改任何内容才能让 boto3 S3 跨 S3 区域工作?
- java - 如何忽略 Spring Security 中的端点?
- java - Java:当前“主”类的 URL.getPath() 返回“null”,为什么?
- asp.net-mvc-4 - asp.net mvc razor c#中的GET路由问题
- python - 在已经开发的代理上过滤
- php - 如果我的两个表之一中存在 php-sql 删除值
- laravel - 使用 laravel 关系根据逗号分隔的 id 获取名称