CODEWITHSUNDEEP
cssinternet-explorer
DextrousDave
DextrousDave

Reputation: 6793

Placeholder attribute on input tags for IE?

I know that Internet Explorer doesn't support the placeholder attribute for input tags, but surely in 2012 there must be another solution for IE?

Upvotes: 15

Views: 18563

Answers (6)

paulalexandru
paulalexandru

Reputation: 9530

Yes, there is a quite easy solution for IE8 and IE9 because on grater versions of IE it already works. (IE10, IE11, etc)

This is the solution i found:

1. Detect Internet Explorer version

<!--[if lt IE 10]>       
    <script type="text/javascript">var ie = 9;</script>      
<![endif]-->     
<!--[if lt IE 9]>                   
    <script type="text/javascript">var ie = 8;</script>          
<![endif]-->

2. Fix the placeholder

if (typeof ie == 'undefined') var ie = 10;   
if (ie == 8 || ie == 9){  

    $("input[placeholder]").each(function() {
        this.value = $(this).attr('placeholder');
    });        

    $("input[placeholder]").focus(function() 
        if (this.value == $(this).attr('placeholder')) this.value = '';
    }).blur(function() {   
        if (this.value == '')
            this.value = $(this).attr('placeholder'); 
    });
}

Upvotes: 0

Venkat.R
Venkat.R

Reputation: 7746

Try this jQuery plugin developed by me

https://github.com/ramsunvtech/jQuery-Plugins/tree/master/IEPlaceHolder

Upvotes: 0

Salt Hareket
Salt Hareket

Reputation: 764

http://the.deerchao.net/PlaceHolder it works on ie without call any function...

Upvotes: 0

sarah ashraf
sarah ashraf

Reputation: 1

We've been using this jQuery plugin in production for a few weeks now and it seems to be working great.

http://webcloud.se/code/jQuery-Placeholder/

Upvotes: 0

corymathews
corymathews

Reputation: 12619

I wrote a jQuery plugin a while back that will add placeholder support to any browser that does not support it.

Placeholder Text in IE

Upvotes: 14

Sampson
Sampson

Reputation: 268344

Actually, IE does support the placeholder attribute in 2012 (Version 10). Couple this with a polyfill for older browsers, and you should have a well-rounded solution to your problem.

Upvotes: 3

Related Questions