Can I get to look like ?

问题

I'm trying to deal with a frustrating Internet Explorer issue that prevents me from using jquery-validate in conjunction with jquery-placeholder. In short, the validation does not work on fields with type=password.

More info Here

One possible fix I came up with is to modify my passwords to be type=text, but this of course displays the passwords in plain-text rather than as *******.

Is there any clever html/js/css trick to make text fields display as though they were passwords?

回答1:

So potentially you could have something set up like this.

Have a hidden input type that simulates the password values

So I guess jquery wise it would be

//everytime the password changes hidden changes with it.
$('#passwordId').change(function() {
 $('#hiddenID').val() = $('#passwordId').val();
});

html:

<input type="password" id="passwordId" />
<input type="hidden" id="hiddenID" />

So this would allow you to validate the hidden input which would be the same value as the password.

回答2:

First "hack" I can think of would be to add a "data-changed" attribute to the input="password" field, then attach an "onchange" event to the password field that sets "data-changed" == true, so that way you can validate if the value "password" was in fact entered by the user (data-changed == true) or if it is being submitted by the placeholder plugin itself.

回答3:

While these answers were coming in, I had an epiphany of my own. At first glance, it appears to work. I'll check out the other answers and accept whichever approach looks like it will work best and be the least "hacky".

I came up with this approach when I discovered that the problem only exists when the field is empty (still has placeholder text), and as such, only will not pass "required" validation. My fix is to change it to type=password when content is entered.

My approach:

$('#password, #password_confirm').keyup(function(){
    if ($(this).attr('type') === 'text') {
        if ($(this).val().length > 0) {
            $(this).attr('type', 'password');
        }
    } else if ($(this).val() == "") {
        $(this).attr('type', 'text');
    }
});

来源：https://stackoverflow.com/questions/17151252/can-i-get-input-type-text-to-look-like-input-type-password

标签

javascript