jquery cross-browser supports issue

Question

I came to know that jquery supports all including old browsers

But I tried to add a placeholder for search box and it is not working in IE8

jQuery(document).ready(function(){
    $('#search').attr('placeholder','search....');                          
});

So I want to know more about cross-browser supports. As said does it work actually or not?

I know the html attribute placeholder is not supported. But my question is about with jquery.

You seem to be abusing the placeholder attribute as a substitute for a `` element. The [specification](http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute) forbids that. — Quentin, Nov 01 '13 at 08:27
I seem to be suppose that jquery uses its own definition beyond the html but having this question came to know jquery just parse the dom...... — Bhojendra Rauniyar, Nov 01 '13 at 08:34
Have you looked at [this](http://stackoverflow.com/questions/15020826/how-to-support-placeholder-tag-in-ie8-and-9)? It seems like a duplicate question has been asked before... — Lave Loos, Nov 01 '13 at 08:25

kundan Karn · Answer 1 · 2013-11-01T08:58:22.173

placeholder is an HTML5 feature which is not supported by IE8

use the following

<input type="text" value="search..." onfocus="if(this.value == 'search...') this.value = '';" onblur="if(this.value == '') this.value = 'search...';" />

using jquery

<input type="text" class="my-input" value=""  />

    <script type="text/javascript">

        $(document).ready(function () {
            $('.my-input').val('search...');
            $('.my-input').focus(function () {
                if (this.value == 'search...') this.value = '';
            });
            $('input.my-input').blur(function () {
                if (this.value == '') this.value = 'search...'
            });
        });
        /*
        here I assumed a class
        .my-input 

        you can use input#id or input.className or other selector

        better you give the code of your text-box or entire form so that I can give you the exact selector

        */
    </script>

how can I do the same with jquery coz I can't edit the markup — Bhojendra Rauniyar, Nov 01 '13 at 08:36

score 1 · Answer 2 · answered Nov 01 '13 at 08:24

1

As Above Placeholder is not supported.
So add the following code/comments to the head of your HTML page. And now ie8 will play nicely.

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

answered Nov 01 '13 at 08:24

John Ballinger

7,380
5
41
51

what is HTML5 Shim and Respond.js ? please discuss briefly about HTML5 Shim and Respond.js and when this 2 is required? thanks – Mou Feb 04 '15 at 12:29

score 0 · Answer 3 · answered Nov 01 '13 at 08:20

0

IE8 dosen't support placeholders

only IE10+ supports to this attribute

But if you really want to have placeholders take a look at this jQuery plugin https://github.com/mathiasbynens/jquery-placeholder

answered Nov 01 '13 at 08:20

zzlalani

22,960
16
44
73

score 0 · Answer 4 · answered Nov 01 '13 at 08:24

0

The problem here is not JQuery but the placeholder attribute itself. See this chart for an answer to your question : No, IE8 does not support the placeholder attribute.

answered Nov 01 '13 at 08:24

yPhil

8,049
4
57
83

jquery cross-browser supports issue

4 Answers4