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.

possible duplicate of [placeholder is not working in IE9](http://stackoverflow.com/questions/17696646/placeholder-is-not-working-in-ie9) — cjdcordeiro, Sep 23 '13 at 10:29
as placeholder is an html5 attribute, below ie10 is not supporting placeholder. — Ankur Dhanuka, Sep 23 '13 at 10:40
again, see the post I flagged, and there is some sort of jQuery lookalike solution there — cjdcordeiro, Sep 23 '13 at 11:46
Please... use the HTML5 `placeholder` attribute and just add some JS to shim it in older versions. — ThiefMaster, Oct 25 '13 at 13:37

score 5 · Answer 1 · answered Sep 23 '13 at 10:33

5

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

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

answered Sep 23 '13 at 10:33

Purify

589
2
11
26

Thanks for given link sir.I will try it now and I will get back with in 10 minutes regarding result. – Venkaiah Yepuri Sep 23 '13 at 10:37

Guillaume Lhz · Accepted Answer · 2013-09-23T13:13:38.093

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();
        }
    });
});

Hi Lehezee when I using this code I get this exception : uncaught exception: type property can't be changed.Please can you help me.Advanced thanks. — Venkaiah Yepuri, Sep 23 '13 at 12:09
try replace .attr by .prop : $(this).prop('type', 'password'); — Guillaume Lhz, Sep 23 '13 at 12:45
Hi Lehezee when I using $(this).prop('type', 'password'); instead of $(this).attr('type', 'password'); I get this exception $(...).prop is not a function.Please see my code ones I edited my code. — Venkaiah Yepuri, Sep 23 '13 at 13:00
well, use .attr(). If you have this exception it's because of an IE security. I search another way to do this and I will edit my post — Guillaume Lhz, Sep 23 '13 at 13:06
Hi Lehezee thanks so much it's working perfectly as per my client requirement.Again and again thanks heartily. — Venkaiah Yepuri, Sep 23 '13 at 14:05
Hi Lehezee I have a small request.Is there any event handlar when I click on f5 key on keyboard.Please help me. — Venkaiah Yepuri, Sep 23 '13 at 14:29
look at this : http://stackoverflow.com/questions/3950029/handle-refresh-page-event-with-javascript — Guillaume Lhz, Sep 23 '13 at 15:09

Placeholder related issue in IE

2 Answers2