两步登录-第二步问题

Question

两阶段登录。 密码，然后输入PIN码。

浏览器提示存储我需要防止的PIN码，但我需要隐藏PIN码条目。

我在第一个登录页面上输入用户名和密码。

我提交并被带到第二个登录页面。

我在第二个登录页面上输入PIN码。

我提交第二个登录页面并成功登录。 :)

主要问题...在第1页上，浏览器提示用户保存密码-可以。 但是，在第二页上，它会提示他们保存PIN，因为它也是作为<input type='password' id='pin_number' name='pin_number' />;

如果我将PIN输入类型更改为文本，则在输入屏幕时，任何人都可以看到该PIN码。

如果我将其保留为“ input type ='password'”，则用户可能会将PIN（错误的值）保存为密码，这可能会导致将来的登录问题。

我一直在寻找一种非JS方法（这意味着，我希望用户不能绕过/覆盖该问题），隐藏/掩盖PIN码，但不要让浏览器提示用户保存它。

非常感谢您的建议，因为虽然我似乎无法在自己喜欢的搜索引擎上找到任何东西，但我不敢相信自己是第一个遇到此问题的人。

这是第1页上的登录代码（仅供参考：第一页上的密码与第二页上的PIN码不同）。

<form id='login-form-main' class="form-signin" action="#" method='post'>
<div id='login-form'>
  <h1 class='login-form-heading'>Login.</h1>

<input type='hidden' name='action' value='initial password entry' />

<label for="username" class="sr-only">Username</label>
<input type="text" id="username" name='username' class="form-control" placeholder="Username" required autofocus>

<label for="password" class="sr-only">Password</label>
<input type="password" id="password" name='password' class="form-control" placeholder="Password" required>

<input class="btn btn-lg btn-primary btn-block" type="submit" name='Login' value="Sign in" />
</form>

<script language='javascript' type='text/javascript'>
function SetFocus() 
{

if (!document.getElementById)
{
    return;
}

var txtMyInputBoxElement = document.getElementById("username");


txtMyInputBoxElement.focus();

}
SetFocus();
</script> 

第二页-PIN输入页面。

<form id='login-form-pin' class="form-signin" action="#" method='post'>
<input type='hidden' name='action' value='personal pin entry' />
<div>
<label for="PINcode" class="sr-only">PIN Code</label>
<input type="password" id="PINcode" name='PINcode' class="form-control" placeholder="Enter your PIN" required>
<input class="btn btn-lg btn-primary btn-block" type="submit" name='Login' value="Enter your PIN" />

<p>
<a href="#">Send me a new PIN.</a>&nbsp;&nbsp;<a href="#">Force Log Out</a>
</p>
</div>
</form>
<script language='javascript' type='text/javascript'>
function SetFocus() 
{
if (!document.getElementById)
{
    return;
}

var txtMyInputBoxElement = document.getElementById("PINcode");


txtMyInputBoxElement.focus();

}
SetFocus();
</script>

Answer 1

做这个

<input type="text" id="PINcode" name='PINcode' class="form-control" placeholder="Enter your PIN" required>

代替

<input type="password" id="PINcode" name='PINcode' class="form-control" placeholder="Enter your PIN" required>

然后，添加以下css

<style>
    input#PINcode {
        text-security:disc;
        -webkit-text-security:disc;
        -mox-text-security:disc;
    }
</style>

这是实现此目的的一种方法，因为带有文本的input s不会引起保存密码提示，所以应该可以解决。