Two-step login - issue with second step

Question

Two-stage login. Password then PIN.

Browser prompting to store PIN number which I need to prevent but I need to hide the pin entry.

I enter username and pwd on the first login page.

I submit and am taken to the second login page.

I enter PIN number on second login page.

I submit the second login page and successfully login. :)

The main issue... On page 1, the browser prompts the user to save the password - that's OK. However, on the second page, it prompts them to save the PIN because it too is entered as a <input type='password' id='pin_number' name='pin_number' />;

If I change the PIN input type to text, the pin number is visible to anyone looking at the screen as it is being entered.

If I keep it as "input type='password' " the user may save the PIN ( the wrong value ) as the password which may cause future login issues.

I have been looking for a non-JS method (which means, I want the user not to be able to circumvent/override the issue), to hide/mask the PIN number but not to have the browser prompt the user to save it.

I'd appreciate your advice because, whilst I cannot seem to find anything on my favorite search engine, I can't believe I am the first person to have this issue.

Here is the login code on page 1 (fyi: the pwd id on the first page is different from that of the PIN on the second page).

<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> 

Page two - the PIN entry page.

<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

do this

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

instead of

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

and then, add the following css

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

this is one way to achieve it, since input s with text won't cause the save password prompt, then that should do the trick.