Password Manager no longer works with Password field after redesign

i have redesigned our company page, and per our design agencies recommendation, went with no labels for our fields, so I have these fields below:

<input type="text" name="userid" value="User ID" />
<input type="text" name="passFake" value="Password" />
<input typ开发者_开发问答e="password" name="passReal" value="" />

So when the user enters the page, the "fake" password field is visible, and the "real" password field is hidden, and the user sees two fields with the labels, essentially, inside the fields. Using Javascript, i'm able to hide the fake password field on focus and show the real password field so that users are entering their password in the password field.

However, with users who use password managers, and have previously recorded their passwords on our site, are experiencing an issue. I suspect that the Password manager tools are modifying the field via javascript without setting the focus, so they are just populating the user's password in the fake password field.

This had two side effects:

• User's password is displaying because it's being inputted into the "text" field, not the password field
• User's not able to login because the password is being put into the wrong field

I can't install the password manager on my home machine, as it's not allowed on company computers, so can I just assume that if I attach a onchange event to the fake password field? Or is my assumption on how the password managers work incorrect?

Changing HTML markup to create a presentational effect can bite you later.

Why not create labels for your inputs as normal, place them on top of your inputs via CSS, then set to hide them on click or when the input receives focus? That should take care of the issues with password managers, since their won't be a fake field there to get in the way.

I put together an example here:

http://jsfiddle.net/hellslam/jk5Bv/10/