CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorerinput
Justin
Justin

Reputation: 4940

Input placeholder for IE not working

I have a bit of a problem. My signup page is dark and the input's on the page are also dark (with shading contrasts). I don't have labels for the input's because I have placeholder text that's a lighter color which is very visible. Unfortunately, today I discovered that on Internet Explorer 10 and earlier, the placeholders aren't there so anyone who has that browser would just have to guess what the inputs are for. Is there anything I can do or a hack around this??

Thanks so much.

Upvotes: -1

Views: 238

Answers (3)

Colin Bacon
Colin Bacon

Reputation: 15609

Placeholder is supported in IE10 but not below (Can I use Placeholder)

Is there anything I can do or a hack around this??

If you have to have placeholders then you will need to go down the JavaScript route. There are many examples of this on SO, here are a couple.

https://stackoverflow.com/a/10337071/1593273

https://stackoverflow.com/a/19312280/1593273

As Quentin has said, if the information that you are displaying is important and must be visible to all users (this includes screen readers too), then your implementation is not correct and should be re-thought.

If the browsers you are supporting have no support for placeholders then they are merely an enhancement and should not be depended on.

Upvotes: 0

Quentin
Quentin

Reputation: 943564

Use a <label> next to the input. If the user can't tell what they should be entering into the field if the placeholder doesn't show up, then it isn't an appropriate use of the placeholder.

From the specification:

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. [...]

The placeholder attribute should not be used as a replacement for a label

Upvotes: 0

wickywills
wickywills

Reputation: 4204

There is a really good jQuery plugin that should be what you're after:https://github.com/mathiasbynens/jquery-placeholder. Once setup, this plugin will enable you to just use the placeholder attribute as you normally would.

Upvotes: 1

Related Questions