CODEWITHSUNDEEP
javascriptjquerycsshtml
steeped
steeped

Reputation: 2633

Placeholder fix for IE that doesn't effect form field's value

My web application contains four form fields that filter a table. All HTML5 placeholder fixes for IE replaces the 'placeholder' with 'value', and get's rid of the value on blur.

Unfortunately, in IE my form fields are trying to filter the table based on the 'placeholder' fix.

Is there a placeholder fix that doesn't effect the actual field value?

Upvotes: 0

Views: 80

Answers (2)

aljordan82
aljordan82

Reputation: 1720

I ran into the same problem before so I made my own fallback

jsfiddle

  //place holder fallback 
  var testInput = document.createElement('input');
  var placeholderSupport = ("placeholder" in testInput);

if(!placeholderSupport){
    $('input[placeholder]').each(function (index, current) {
    var $real = $(this);
    var placeHolderValue = $real.attr("placeholder");
    var classes = $real.attr("class");
    $fakeInput = $("<input>").attr({"type": "text"}).val(placeHolderValue).addClass('placeholder fake-input' , classes );

    $fakeInput.insertBefore($real);
    $real.hide();
    $fakeInput.focus(function() {
      $(this).blur().hide()
      .next().show().focus();
    });

    $real.blur(function () {
      if ($(this).val() == '') {
        $(this).hide()
        .prev().show();
      }
    });
  });
}

Upvotes: 1

Fresheyeball
Fresheyeball

Reputation: 30015

I recommend placeholder.js, its pretty good as a drop in. You include it in your html, and use the native html5 placeholder api.

Upvotes: 2

Related Questions