javascript - Html5 placeholder Issue on all IE -

i seem have strange problem html5 placeholder. im using drop down menu show/hide divs , within div have few text fields

when choose 1 of options drop down show div, div shows placeholders not in text fields.

any appreciated.

the place holder plugin

<script type='text/javascript'>  $(document).ready(function(){  $("#customertype").change(function() {             if ($("#customertype option[value='new']").attr('selected')) {                    $('#newcustomer').show();              }             if ($("#customertype option[value='existingcustomer']").attr('selected')) {                  $('#newcustomer').hide();                    $('#existingcustomer').show();                }         });         });         </script>     <!--start new customer  -->             <div id="newcustomer" style="display:none;">                <div id="field"> <span id="sprytextfield5">                 <input class="input address" type="text" name="address" placeholder="enter mailing address" id="address" />                 </span> <span id="sprytextfield6">                 <input class="input" type="text" name="city" placeholder="enter city" id="city" />                 </span> <span id="sprytextfield7">                 <input class="input" type="text" name="province" placeholder="enter province" id="province" />                 </span> <span id="sprytextfield8">                 <input class="input" type="text" name="postalcode" placeholder="enter postal code" id="postalcode" />                 </span> </div>             </div>             <!--end new customer  -->  

ie not support placeholders, @ least through 9.

https://github.com/madeinstefano/ie-placeholder/blob/master/ie-placeholder.js

use following code:

    //ie placeholder; $(function (){   if (/msie 9|msie 8|msie 7|msie 6/g.test(navigator.useragent)) {     function resetplaceholder() {       if ($(this).val() === '') {         $(this).val($(this).attr('placeholder'))           .attr('data-placeholder', true)           .addclass('ie-placeholder');         if ($(this).is(':password')) {           var field = $('<input />');           $.each(this.attributes, function (i, attr) {             if (attr.name !== 'type') {               field.attr(attr.name, attr.value);             }           });           field.attr({             'type': 'text',             'data-input-password': true,             'value': $(this).val()           });           $(this).replacewith(field);         }       }     }      $('[placeholder]').each(function () {       //ie user refresh don't reset input values workaround       if ($(this).attr('placeholder') !== '' && $(this).attr('placeholder') === $(this).val()){         $(this).val('');       }       resetplaceholder.call(this);     });     $(document).on('focus', '[placeholder]', function () {       if ($(this).attr('data-placeholder')) {         $(this).val('').removeattr('data-placeholder').removeclass('ie-placeholder');       }     }).on('blur', '[placeholder]', function () { resetplaceholder.call(this); });     $(document).on('focus', '[data-input-password]', function () {       var field = $('<input />');       $.each(this.attributes, function (i, attr) {         if (['type','data-placeholder','data-input-password','value'].indexof(attr.name) === -1) {           field.attr(attr.name, attr.value);         }       });       field.attr('type', 'password').on('focus', function () { this.select(); });       $(this).replacewith(field);       field.trigger('focus');     });   } });