Placeholder related issue in IE

Question

Please anybody can help me I have been faced Placeholder related issue in my project.It's work in Mozilla,Chrome,safari..etc.But it's not work in IE.Advanced thanks.

Description :

     <form class="">
             <input type="text" value="Email" id="inviteEmail"/>
             <input type="text" value="Password" id="invitePassword">
         </form>

     var defaultTextEmail = '&{"Email"}';
     var defaultTextPassword = '&{"general.password"}';

    $(document).ready(function() {
    $('#inviteEmail').bind('focus', function() {
        $('#inviteEmail').val(defaultTextEmail);
        var currentValue = $.trim($(this).val());
        if(currentValue == 'Email') $(this).val('');
    });
    $('#inviteEmail').bind('blur', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == '') $(this).val('Email');
    });



    $('#invitePassword').bind('focus', function() {
        $('#invitePassword').val(defaultTextPassword);
        var currentValue = $.trim($(this).val());
        if(currentValue == 'Password') {
            $(this).val('');
            $(this).prop('type', 'password');
        }
    });
    $('#invitePassword').bind('blur', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == '') {
            $(this).val('Password');
            $(this).attr('type', 'text');
        }
    });
});

Now it's show proper hint messages in text boxes on all browsers rather than IE.I should show hint messages under text boxes but my client requirement is hint messages should show with in text boxes(For better appearance).I tried with 'value' attribute but it show password hint message with dots but not text.Please help me.Advanced thanks.

Answer 1

I made a working Fiddle for you HERE

HTML :

<form class="left push-bottom-px10 width-match-parent">
    <input type="text" id="email" value="email"/> 
    <input type="text" id="password" value="password"/> 
</form>

JQUERY :

$(document).ready(function() {
    $('#email').bind('focus', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == 'email') $(this).val('');
    });
    $('#email').bind('blur', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == '') $(this).val('email');
    });
    $('#password').bind('focus', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == 'password') {
            $(this).val('');
            $(this).attr('type', 'password');
        }
    });
    $('#password').bind('blur', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == '') {
            $(this).val('password');
            $(this).attr('type', 'text');
        }
    });
});

EDIT

Because of IE security on change type property, this way doesn't work... You can do a fakepassword to hide when user want to enter her password. Like this FIDDLE

HTML :

<form class="left push-bottom-px10 width-match-parent">
    <input type="text" id="email" value="email"/> 
    <input type="text" id="fakepassword" value="password"/> 
    <input type="password" id="password" value=""/>
</form>

JQUERY :

$(document).ready(function() {
    $('#password').hide();

    $('#email').bind('focus', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == 'email') $(this).val('');
    });
    $('#email').bind('blur', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == '') $(this).val('email');
    });
    $('#fakepassword').bind('focus', function() {
        $('#fakepassword').hide();
        $('#password').show().focus();
    });
    $('#password').bind('blur', function() {
        var currentValue = $.trim($(this).val());
        if(currentValue == '') {
            $('#fakepassword').show();
            $('#password').hide();
        }
    });
});

Answer 2

You can fix that problem via jQuery. Here's a popular fix method:

https://github.com/mathiasbynens/jquery-placeholder