如何使用javascript更改输入的类型

Question

我想创建一个现代密码输入，使用切换密码按钮来更改输入类型。

问题:

我做了下面所有的事情，但是当我测试它并点击图标时，它没有改变任何东西。

function toggle_password() {
const input = getElementById("toggle_password");
if (input.type === "password") {
input.type = "text";
} else {
input.type = "password";
}
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div>
<i class="fa fa-eye" aria-hidden="true" id="toggle_password" onClick="toggle_password()"></i>
<input id="toggle_password" class="align from_Input password" type="password" placeholder="Password" required />
</div>

这里是toggle_password函数

Answer 1

您在两个不同的输入中使用相同的id。由于idtoggle_password首先出现在<i>元素上，因此考虑了<i>

document也在const input = document.getElementById("password");

问题:点击图标时检查日志，它在输入变量中保存<i>。

function toggle_password() {
const input = document.getElementById("toggle_password");
console.log(input)
if (input.type === "password") {
input.type = "text";
} else {
input.type = "password";
}
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div>
<i class="fa fa-eye" aria-hidden="true" id="toggle_password" onClick="toggle_password()"></i>
<input id="toggle_password" class="align from_Input password" type="password" placeholder="Password" required />
</div>

解决方案:

为密码<input>元素指定一个不同的id，并使用该id获取该元素。所以你将<input>元素保存在输入变量中。

function toggle_password() {
const input = document.getElementById("password");
console.log(input)
if (input.type === "password") {
input.type = "text";
} else {
input.type = "password";
}
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div>
<i class="fa fa-eye" aria-hidden="true" id="toggle_password" onClick="toggle_password()"></i>
<input id="password" class="align from_Input password" type="password" placeholder="Password" required />
</div>

Answer 2

首先，它是document.getElementById,getElementById是document对象内部的方法。

第二，图标和输入具有相同的id,id属性应该是唯一的(我将输入id更改为toggle_password__input)。

function toggle_password() {
const input = document.getElementById("toggle_password__input");
if (input.type === "password") {
input.type = "text";
} else {
input.type = "password";
}
}

<div>
<i
class="fa fa-eye"
aria-hidden="true"
id="toggle_password"
onClick="toggle_password()"
>toggle</i>
<input
id="toggle_password__input"
class="align from_Input password"
type="password"
placeholder="Password"
required
/>
</div>

Answer 3

您可以简化标记和脚本，如下所示:

document.querySelector(".fa-eye").onclick=ev=>{
let inp=ev.target.nextElementSibling;
inp.type=inp.type==="password"?"text":"password";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div>
<i class="fa fa-eye" aria-hidden="true"></i>
<input class="align from_Input password" type="password" placeholder="Password" required />
</div>