CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Nyxynyx
Nyxynyx

Reputation: 63687

Disable password masking in password field

I want creating form field hints where the default value shows 'Password' and on focus, it goes away. If the field loses focus with no use input, it will reveal back to the default value of 'Password'.

Problem: The default value for the password field gets masked as well. How can I show the default value of 'Password' without getting masked, and masks only the user input?

jQuery Code

$(".splash_register_short_input, .splash_register_long_input").each(function() {
    $(this).val( $(this).attr('title') );
});

$(".splash_register_short_input, .splash_register_long_input").focus(function() {
    if($(this).val() == $(this).attr('title')) {
        $(this).val('');
    }
});

$(".splash_register_short_input, .splash_register_long_input").blur(function() {
    if($(this).val() == '') { // If there is no user input
        $(this).val($(this).attr('title'));
        $(this).removeClass('splash_register_have_userinput');
    } else {    // If there is user input
        $(this).addClass('splash_register_have_userinput');
    }
});

HTML Code

<form id="splash_register_traditional_form">
    <input type="text" name="register_first_name" class="splash_register_short_input" title="First Name" /><label for="register_first_name"></label>
    <input type="text" name="register_last_name" class="splash_register_short_input" title="Last Name" /><label for="register_last_name"></label>
    <input type="text" name="register_email" class="splash_register_long_input" title="Email" /><label for="register_email"></label>
    <input type="password" name="register_password" class="splash_register_long_input" title="Password" /><label for="register_password"></label>
    <input type="submit" id="splash_register_signup_button" value="Sign up" />
</form>

Upvotes: 2

Views: 2354

Answers (3)

Sukumar Nagarajan
Sukumar Nagarajan

Reputation: 534

To hide password programatically add this line below oncreate android.provider.Settings.System.putInt(this.getContentResolver(),android.provider.Settings.System.TEXT_SHOW_PASSWORD, 0);

Upvotes: 0

Quasdunk
Quasdunk

Reputation: 15230

You can simply use the HTML5 placeholder-attribute:

<input type="password" placeholder="Enter Password..." />

Concerning the lack of backwards compatibility as mentioned in the comments, this jQuery placeholder plugin combined with some kind of a fallback machanism in case the attribute is not supported (like maybe this one) may be helpful.

Upvotes: 5

Anurag Uniyal
Anurag Uniyal

Reputation: 88845

Best way to do it would be to not set default value as value of password field but as an overlay over password field which disappears on focus or when user changes value to something else. You can use the arelady existing jquery in-field-label plugins e.g.

http://www.viget.com/inspire/a-better-jquery-in-field-label-plugin/
http://fuelyourcoding.com/scripts/infield/
http://www.kryogenix.org/code/browser/labelify/

Upvotes: 2

Related Questions