HTML: HTML5 Placeholder attribute in password field issue- shows normal text?

To answer your updated question,

I am building off of the answer given in this thread.

Wrap your form in a span element. Then you can add a label as a placeholder on the password field. Finally, in order to remove the label when a password is typed, bind on keypress of the password field and remove the text from the label. Here is an example of the code, you will probably want to change the ids:

<span style="position: relative;">
<input id="password" type="password" placeholder="Password" >
<label id="placeholder" style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="password">Password</label>
</span>
<script type="text/javascript">
    $(document).ready(function(){
        $('#password').keypress(function(){
            $('#placeholder').html("");
        });
    });
</script>

Try using the password dot code in the placeholder like so:

placeholder="●●●●●"

For support in IE please refer to other threads such as Showing Placeholder text for password field in IE or placeholder works for text but not password box in IE/Firefox using this javascript

Even though I'm against this from a UX standpoint, I will provide an answer for this.

Instead of using the HTML5 attribute placeholder, use value instead.

<input type="password" value="1234567">

Then on focus, replace the value with an empty string.

var inputs = document.getElementsByTagName('input'),
    i = 0;
for (i = inputs.length; i--;) {
  listenerForI(i);
}

function listenerForI(i) {
  var input = inputs[i],
      type = input.getAttribute('type'),
      val = input.value;
  if (type === 'password') {
    input.addEventListener('focus', function() {
      if (input.value === val) input.value = '';
    });
    input.addEventListener('blur', function() {
      if (input.value === '') input.value = val;
    });
  }
}

I want to reiterate that I do NOT recommend this approach, but this will do what you're looking for.

EDIT:

Please visit this page which will mimic placeholder functionality if it's not supported by your browser using jQuery: http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/