HTML5/jQuery - Hide content on old browsers?

Question

My question is actually the opposite, but you get the idea.

I have a form with placeholders and labels above the ´input´ fields. It looks kind of a stupid, but as old browsers don't support HTML5, where ´placeholder´ attribute is added, the labels are needed.

I was thinking, that if there'd be way to check if the browser supports HTML5? If it does, hide the labels. If doesn't, hide the placeholders (well you don't need that, because the browser wouldn't detect the placeholders anyway).

<div class="6u">
Email
<input type="email" class="text" name="email" placeholder="Email" />
</div>

I guess it's possible with jQuery, but I'm really new to it. Would this be possible?

http://stackoverflow.com/questions/15020826/how-to-support-placeholder-tag-in-ie8-and-9 — yashhy, Dec 12 '13 at 07:17
You can use [Modernizr](http://modernizr.com/) to detect if browser supports HTML5 and accordingly use jquery to hide/show labels — skos, Dec 12 '13 at 07:22

score 2 · Answer 1 · answered Dec 12 '13 at 07:22

You can try a feature detection

<div class="6u">
    <label>Email</label>
    <input type="email" class="text" name="email" placeholder="Email" />
</div>

then

.placeholder label{
    display: none;
}

and

(function () {
    if ('placeholder' in document.createElement('input')) {
        var html = document.getElementsByTagName("html")[0];
        html.className = (html.className || '') + ' placeholder'
    }
})();

Demo: Fiddle

score 0 · Answer 2 · answered Dec 12 '13 at 07:21

0

if you want add id attribute in input text

<div class="6u">
Email
<input id="email" type="email" class="text" name="email" placeholder="Email" />
</div>

and use removeAttr() function

$("#email").removeAttr("placeholder");

answered Dec 12 '13 at 07:21

yMed

65
4

score 0 · Answer 3 · answered Dec 12 '13 at 07:21

0

I would do the value check, described here diveintohtml5. And then, if the browser supports HTML5 add a class to the body tag to hide all labels. Let the browser do the work, not your JavaScript.

answered Dec 12 '13 at 07:21

schlingel

8,560
7
34
62

score 0 · Answer 4 · answered Dec 12 '13 at 07:22

you can check if the browser supports for any of the HTML5 features like canvas or local storage as follows:- refer http://diveintohtml5.info/detect.html

function supports_local_storage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch(e){
    return false;
  }
}

HTML5/jQuery - Hide content on old browsers?

4 Answers4