HTML: HTML5 Placeholder attribute in password field issue
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
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
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>
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/