Password fields should be changed to text fields

[tjconcept]

When using example on a password field, you just get a string of stars, not very usefull.

I've used this rather ugly code to change a password field to a text field, when the example text is shown:

$('form').on('blur','input[type="password"]',function(){
    if ($(this).val() === '') {
        $(this).replaceWith(function(){
            return $(this).clone(true).attr('type','text').val($(this).attr('title')).addClass('was-password').addClass('example');
        });
    }
}).on('focus','input.was-password',function(){
    $(this).replaceWith(function(){
        return $(this).clone(true).attr('type','password').val('').removeClass('was-password').removeClass('example').addClass('set-focus');
    });
    $('input.set-focus').focus().removeClass('set-focus');
})
$('input[type="password"]').replaceWith(function(){
    if ($(this).val() === $(this).attr('title')) {
        return $(this).clone(true).attr('type','text').addClass('was-password').addClass('example');
    } else {
        return $(this).clone(true);
    }
});

Think something similar should be implemented in core. The reason why I'm replacing the input rather than just changing the type attribute is due to some security rule preventing the transform.

[tjconcept]

I just read the wiki, and realized you're already aware of this issue. Sorry. Why not implement this feature?

[mudge]

Internet Explorer will not allow changing the type attribute of inputs (c.f. the jQuery attr documentation), so you'll need to create a new input with something like:

$('<input type="password"/>');

My concerns in the past have been regarding keeping the plugin as unintrusive as possible; I'm already uneasy about the fact that it modifies input values for examples and the wholesale replacement of the original field feels like it could be a step too far (but I'm willing to be persuaded otherwise).

Really, I think a better approach would be to use an overlay which would then work for all kinds of inputs, including password fields without having to touch the original elements. I started experimenting in another branch with this approach but haven't looked at it in a while.

[tjconcept]

Okay.

Interesting, I just looked at your branch and "copyCSS" seems like an endless function.. I'm afraid an overlay or replacing the input field would open up too many issues, and be very hard to maintain. In fact, I think modifying the "value" is the least intrusive. That would also be what a developer expects. As you mention, the only problem is the IE security restriction, but it's not present in newer versions of IE, which is also why I have decided to let my old IE users see stars.

[tjconcept]

In relation to this issue, a whole new range of issues is popping up when using HTML5 input types. I do a lot of webapps for iPads, and especially with phone numbers it's a big advantage to use an input of type "number", but then the example text won't work. I work around it by replacing the input field as i do with password fields.

[filintod]

doesn't the html5 have a placeholder attribute to do this exact thing? I'm thinking that assigning placeholder to the input fields and checking if the browser is HTML5 compatible via modernizr would help you in your ipad+web development.

.... html code <input name="example" placeholder="enter text" />

.... javascript code if (checkmodernizr_for_placeholder==false){ // checkmodernizr_for_placeholder would need to be created $('input').each(function(){ $(this).example($(this).attr('placeholder')); } } );