Placeholder Support for IE9

[toddca]

For some reason placeholder text does not work on IE9 much less earlier browsers. Not supporting the latest version of the most popular browser really hurts my ability (and I am sure others) to adopt this framework for any serious application. The reason for placeholder text is to save screen space and/or offer formatting help, etc. I personally really need a solution which is cross browser and I really love this framework minus the support for the latest version of IE.

[wub]

I'm sure you could find other ways to get around this for now ;) But yes, perhaps a built-in/optional module for it would be nice. Perhaps you could do it yourself?

[richardp-au]

Take a look at this plugin. It works well for me.

[Gavrisimo]

I second @R1ch0 's comment. I am using @mathiasbynens placeholder plugin for a while now and it's working great!

[toddca]

Thanks all, I like @mathiasbynens placeholder solution better than others I have seen as it does a browser check first before attempting any work related to adding the placeholder. Looks like a solid solution which I plan to implement later this week. Thanks all for the very helpful responses.

[toddca]

OK I found a bummer issue when using @mathiasbynens placeholder solution, when using input(s) with validation and placeholder text the validation believes a required input has been populated when it contains placeholder text. This is a deal breaker...how did you guys work around this one?

[Gavrisimo]

In browsers that don't support placeholder attribute this plugin is filling in value attribute so that's why you are seeing this behavior. The way i worked around this issue was something along the lines of adding addClass() jQuery method to this placeholder plugin and simply applying some class, like placeholder or anything you want. Then in validation i check if the field has that class -> then always return false, i.e. the field is invalid.

That's just some basic and quick workaround... :)

[toddca]

Thanks but that is not going to always work, I have other validation such as numeric only, regular expression, etc which are not going to work. It appears https://twitter.com/signup has worked around this somehow for IE browsers -- at this point I am starting to think I need to move to a vertical form layout and do away with placeholder text...

[Gavrisimo]

Well i have used this plugin for validation:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

That always return false if this class is present is meant only to be applied to required validation. So imagine this situation:

1. You are visiting your site with some browser that does not support placeholder attribute
2. value attribute will be used to show placeholder text and some class of your choosing will be added to the field that is being validated
3. when using jquery validate plugin your field can have multiple validation rules, for example required and mail.
4. the explanation from before only kicks in required validation, so you can add your check for added class somewhere around here:

https://github.com/jzaefferer/jquery-validation/blob/master/jquery.validate.js#L960

Or write new custom validator that behaves same as the default requred one with this small difference.

That way you can have whatever validation you want, i mean how many you want, the thing to understand is that all your rules for given field need to be valid in order for given field to be valid, .i.e. if you have 4 out of 5 rules valid, and only required rule that is not valid(because field has that custom class) the field won't be valid...

Hope i am making some sense here... =D

[toddca]

Hey Gavrisimo thanks a ton for your assistance. My project is based on MVC 4 which uses jquery,validate.js and jquery.validate.unobtrusive.js which ships with MVC. It appears your solution would require a rip and replace which may be totally worth the work, my only concern and hesitation at this point is my Jquery skillz :-) I am concerned with the level of effort this would take. The unobtrusive validation is nice because it uses HTML5 data annotations, for example:

<input data-val-regex="The Last Name can only contain letters." data-val-regex-pattern="[a-zA-Z]*" ... />

This is very clean and works as needed minus the placeholder text issue. I wonder if I could hook a pre-validation event, where if(IE){ for each input with placeholder and val() == placeholder text, remove val(), allow validation to occur, and on post validation replace the placeholder text on each element I just previously modified. Again my concern is around how green I am when it comes to jquery/javascript.

[Gavrisimo]

Well it can be pretty simple to create some "custom" required validator:

http://jsfiddle.net/rp2rj/1/

Just check for that custom class, return false always if it's present, else check if it's empty or not and return accordingly.

That way you only need to change source of placeholder plugin to add that custom class here:

https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.js#L147

and here:

https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.js#L150

Maybe it needs to be added somewhere else, but you get the point.

[toddca]

OK I believe I found a solution, not sure if I will have any side effects from this but I modified the code you provided, specifically I changed the method name to required which I believe overwrites the original handler.

$.validator.addMethod("required", function (value, element) {
if ($(element).hasClass('placeholder')) {
return false; // this means placeholder plugin kicked in so always return false
} else {
// check if value is empty or not
return (value && value.length > 0);
}
});

[mathiasbynens]

@Gavrisimo You could just use the placeholder class name which my plugin will automatically add to any elements that are currently displaying their placeholder text.

See jquery-validation/jquery-validation#323 for some other possible solutions.

[Gavrisimo]

@mathiasbynens Yeah, but that was a bit too generic for me. :) Thanks for the link!

[mdo]

We won't be adding this I think, unless @fat wants to get in there and play with IE :). We'll defer to third party plugins for now.

[cordoval]

is this still the case? no support for placeholder workaround? just curious which is the best workaround so far?

[afanjul]

Actually I would like to see this problem fixed and buil-in Bootstrap, its a main feature bacause there is a form type called "Inline" so it suppose to be a "Inline form" working in all compatible browsers (like IE).

Otherwise, somebody could tell us the best implementation possible with a little guide? thanks guys

[tjwebb]

+1. Fix this.

[richardp-au]

+1. Fix this.

There's nothing to fix. There's no bug in BS. It's a browser compatibility issue and there are plenty of third party plugins available to add compatibility if desired.

[mstephen]

This has been my first compatibility stumbling block with bootstrap, which is a huge testament to the developers. That said, support would be hugely appreciated. At the very least, I think there should be a "heads up!" marker discussing the incompatibility where forms are described.

[SamBenson]

@markdotto & @fat - I'd be happy to add the functionality for this if you'd reconsider adding it to BS.

[thezoggy]

just load shiv, placeholder works fine with ie9

[germanf]

+1 compatibility :)

[greendezine]

@mathiasbynens placeholder.js is working great for me in IE9, but not working in IE8. Any suggestions?

[tjwebb]

Same, placeholder.js in IE8 does not behave the same. I had to implement a
custom solution here. I still maintain that bootstrap should solve this,
since they are relying on a feature that doesn't exist in all browsers.

On Sun, Jan 6, 2013 at 8:10 PM, greendezine notifications@github.comwrote:

@mathiasbynens https://github.com/mathiasbynens placeholder.js is
working great for me in IE9, but not working in IE8. Any suggestions?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2401#issuecomment-11938040.

[mathiasbynens]

@mathiasbynens placeholder.js is working great for me in IE9, but not working in IE8. Any suggestions?

Are you talking about jquery.placeholder.js? If so, please file a bug.

[RusAlex]

placeholder.js will bring you problems instead of good placeholders.
That means, when placeholder.js is enabled, remember every your input will have
value (placeholder.js sets values) .

And if you want to check if(!input.value) in any place of your JS
code, you will receive an result, that every input has a value.

I've got this problems and spend time for understanding why my scripts are not
working, after placeholder.js was used. So i decided to turn it off.

On Sun, Jan 06, 2013 at 05:09:20PM -0800, greendezine wrote:

[1]@mathiasbynens placeholder.js is working great for me in IE9, but
not working in IE8. Any suggestions?

—
Reply to this email directly or [2]view it on GitHub.
[YkPp7ckUmF7vZASNJwP_Af2NXo3F34FIyIgdguo2oFEWNaIGyGpU6XOzZv7lq6kC.gif]

References

1. https://github.com/mathiasbynens
2. Placeholder Support for IE9 #2401 (comment)

[greendezine]

@RusAlex Correct me if I'm wrong, but in the function call, you can scope the jquery down to specific form selectors on the page. @mathiasbynens. Yep, jquery.placeholder.js. Bug has been filed.

[thirumala548]

Hi,

I got a problem with place holder, when i am opening into internet explore and samsung default browers when i focus on text field placeholder is disable.

Not wait up to user enters the one character .

But the other browers working fine up to wait the user enters the one character.

Sample html :: ""

If any one face this problem please send me the solution .....

Thanks,
Thirumala