CODEWITHSUNDEEP
javascriptjqueryhtmlcssinternet-explorer-8
rish
rish

Reputation: 215

Placeholder value didn't work in IE8

I have been created webpage using html,css and jqueries.

I fixed maximum issues in IE8. Still i am struggling in placeholder value in form.

For that i tried,

I added below scripts in my head tag:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-placeholder/2.0.8/jquery.placeholde‌​r.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

And i added inputs before closing body tag:

<script>$('input, textarea').placeholder();</script>

Above those scripts are placed in my index.html.

This is header.html:

<form action="#" method="get" id="search-form" role="search" class="large--right">
         <input name="q" type="text" id="search-field" placeholder="Search store..." class="hint">
         <button type="submit" value="" name="submit" id="search-submit" class="icon-fallback-text">
         <span class="icon icon-search" aria-hidden="true"></span>
         <span class="fallback-text">Search</span>
         </button>
      </form>

But it didn't work, May i know, these are all is correct.. If not, can you please give me suggestions.

Thanks in advance.

Upvotes: 0

Views: 888

Answers (4)

Mr_Green
Mr_Green

Reputation: 41832

I don't think you require any jquery placeholder plugin here.

Chrome, firefox and IE10+ already supports placeholder attribute for text field.

So, the only browser which you are trying for placeholder is IE8 and IE9.

The most of the part to get a placeholder like design can be done using css. and then just to trigger the keypress event, javascript is required.

Here is a demo

CSS

label {
    position: absolute;
    z-index: 0;
    left: 0px;
    color: #CCC;
    top: 0px;
    padding: 2px;
}
.input-wrapper {
    position: relative;
    display: inline-block;
}

HTML

<form action="#" method="get" id="search-form" role="search" class="large--right">
    <div class="input-wrapper">
        <input name="q" type="text" id="search-field" class="hint"></input>
        <label id="label-search-field" for="search-field">Search store...</label>
    </div>
    <button type="submit" value="" name="submit" id="search-submit" class="icon-fallback-text"> <span class="icon icon-search" aria-hidden="true"></span>
 <span class="fallback-text">Search</span>

    </button>
</form>

JavaScript

// Include this function
function placeholder(e, label) {
    var e = e || window.event;
    var el = e.currentTarget || e.srcElement;
    label.style.color = el.value.length ? "transparent" : "";
}


// call like this in your project
var text = document.getElementById('search-field');
text.onkeyup = function (e) {
    var label = document.getElementById('label-search-field');
    placeholder(e, label);
}

Upvotes: 1

Deenadhayalan Manoharan
Deenadhayalan Manoharan

Reputation: 5444

Try following plugin

https://github.com/mathiasbynens/jquery-placeholder

or

http://jamesallardice.github.io/Placeholders.js/

or

if($.browser.msie){ 
   $('input[placeholder]').each(function(){  

        var input = $(this);        

        $(input).val(input.attr('placeholder'));

        $(input).focus(function(){
             if (input.val() == input.attr('placeholder')) {
                 input.val('');
             }
        });

        $(input).blur(function(){
            if (input.val() == '' || input.val() == input.attr('placeholder')) {
                input.val(input.attr('placeholder'));
            }
        });
    });
};

Its helpful for you

Upvotes: 1

Pratik Joshi
Pratik Joshi

Reputation: 11693

Use THIS plugin.

Check demo of placeholder here HERE->

Use this Code

<!--[if lte IE 10]>
      <script type="text/javascript" src="http://linux.aress.net/smudev/js/nwxforms.js"></script>    
      <script type="text/javascript">window.onload = Function('nwxforms(this)');</script>
  <![endif]-->

Take JS from my website.

I suggest you to take JS file from here HERE. And then put in your folder and use relative path like :

<script type="text/javascript" src="YourjsFolder/nwxforms.js"></script>

Upvotes: 1

MFazio23
MFazio23

Reputation: 1312

When copying your JS files to my local environment, I got a really odd URL for the placeholder JS code:

http://cdnjs.cloudflare.com/ajax/libs/jquery-placeholder/2.0.8/jquery.placeholde%C3%A2%E2%82%AC%C5%92%C3%A2%E2%82%AC%E2%80%B9r.min.js

Try copying this URL (it looks the same, but there are some weird characters in yours):

//cdnjs.cloudflare.com/ajax/libs/jquery-placeholder/2.0.8/jquery.placeholder.min.js

Upvotes: 1

Related Questions