IE9 JavaScript问题的占位符脚本

Question

I have the following script which if the users has the browser ie9 then we fix the known issue regarding ie9 not supporting place holders:

       if (isIE9) { // ie9
            // this is html5 placeholder fix for inputs, inputs with placeholder-no-fix class will be skipped(e.g: we need this for password fields)
            jQuery('input[placeholder]:not(.placeholder-no-fix), textarea[placeholder]:not(.placeholder-no-fix)').each(function() {

                var input = jQuery(this);

                if (input.val() == '' && input.attr("placeholder") != '') {
                    input.addClass("placeholder").val(input.attr('placeholder'));
                }

                input.focus(function() {
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                });

                input.blur(function() {
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });
        }

When I load the page in ie9 I see the place holder for the email box, but the password box has decided to take the placeholder and make it look like someone has entered a value as shown here:

My markup is as follows:

<div class="form-group">
   <input id="EmailAddress" class="form-control" type="text" value="" placeholder="Please enter your email address" name="EmailAddress" data-val-required="Email Address is required" data-val="true" autocomplete="off" maxlength="320">
</div>
<div class="form-group">
   <input id="Password" class="form-control" type="Password" value="" placeholder="Password" name="Password" data-val-required="Password is required" data-val="true" autocomplete="off" maxlength="50">
</div>

Can anyone suggest anything that might help me cure the problem?

I also added placeholder-no-fix to the password class but yet when viewed in ie9 the password field is empty it does not show the place holder.

Answer 1

You're setting the value (.val()) of the password field to the string "Password", which it treats as a password and hides the characters.

I suppose as a dirty-ish hack you could set the input type to text until they focus the field, then set it to password until the field is empty on blur again (it'd obviously be bad to set it to text if their password was in there!).

Answer 2

I recommend you using an extra position: absolute; div as the placeholder fallback for IE 9. Simply show / hide the div onblur.

Using value as placeholder would require the user to delete everything before filling in the fields, and it would definitely have the ****** issue in the password field.