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

Question

I am making a Login form, in which there are two fields-

simplified:

<input type="text">
<input type="password" placeholder="1234567" >

In my tests (FF, Chrome) the placeholer shows grey text. How can I have the placeholder text in password 'dots' ? And have placeholder support in IE?

eg. the user sees a fake grey password, not the text 1233467.

(I have jquery available)

Thankyou very much,

Harley

EDIT: Looks like this is the wrong way to use placeholder. However, how can I get IE support? Thanks

Onetime

The point of the "placeholder" is to show the user descriptive text explaining the intended purpose of the field. If it just showed dots, it would be completely confusing. Support for IE requires a JavaScript solution. – Gormand

The point of the placeholder is to provide a hint (e.g. an example) of what to put in the field. The intended purpose should be described by a <label>. (<label> Data <input name="data" placeholder="yyyy-mm-dd"> </label>). The spec is very explicit about not using it as a substitute for a label element. – Butyrate

If you want dots out it in the value attr. – Eider

To Pointy's point, from a usability standpoint I think it's a very bad idea to display a placeholder in an input field with just dots. It does need to be descriptive. – Colima

There should be absolutely no need to use a placeholder on a password. – Butyrate

@Butyrate well something like "required" or "8 or more characters" would be OK, but I agree that it's not of much value. – Gormand

And then storing the password plaintext in the placeholder leaves it visible to the source, not very secure! IF you really want it, just use an arbitrary amount of * in the placeholder – Sontag

@All Looks like I'm using placeholder wrong. Please see my updated Q. – Onetime

Answer 1

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

Carnahan

Answer 2

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>

Carnahan

Answer 3

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/

Colima

Answer 4

You can emulate the placeholder password with ••••••••, just copy/paste it.

<input placeholder='••••••••' type='password' required />

Fiasco