Question

我尝试了很多尝试来解决这个问题，但我无法：我想制作两个带有value="password"和value ="Confirm password"的示例输入框以这种方式，当您点击它时，值类型从text更改为password

我设法更改了一个password一个而不是confirm password一个的框。您看到问题是由于input[type="password"]中的定位我只能够添加一个位置。当我点击另一个confirm text box时，它会直接跳转到password text box

HTML

<input type = "passwords" id="passwords" name="passwords" value ="Password" onclick="passwords();" />
    <input type = "confirm" id="confirm" name="confirm" value ="Confirm Password" onclick="confirms();" />

CSS

input[type="password"]
{
    background: transparent;
    border:none;
    color:#2185c5;
height:41px;
width:273px;
padding-left:35px;
border-radius:3px;
font-size:20px;
position:absolute;
top:690px;
left:353.5px;
position:absolute;
z-index:11;

    }

JS

function passwords()
{
    document.getElementById("passwords").value= "";
    document.getElementById('passwords').type = 'password';

}

function confirms()
{
    document.getElementById("confirm").value= "";
     document.getElementById('confirm').type = 'password';

    }

Answer 1

您无法输入任何类型的内容。 confirm不是类型，passwords也不是。它的password。

<强> HTML

<input type="password" id="passwords" name="passwords" placeholder="Password" onclick="passwords();" />
<input type="password" id="confirm" name="confirm" placeholder="Confirm Password" onclick="confirms();" />

此外，您的password个元素都会重叠。在CSS的末尾添加此内容

<强> CSS

input[type="password"]:nth-child(2) {
    top:690px;
    left:700px;
}

Answer 2

<input type="password" placeholder="password" />
<input type="password" placeholder="Confirm password" />

Answer 3

您无法使用自己的类型。密码和密码确认不是类型。点击此处查看可用的输入类型：Click Here

这可能对你有帮助！：）

在css中创建两个密码输入

3 个答案: