Simulate placeholder in IE8

Question

I was reading the documentation here and it seems that the attribute placeholder does not work in IE8. Would have some way to simulate the placeholder that you use?

Example of HTML not working in IE8:

<input type="text"  placeholder="NOME" /> 

Answer 1

There is a project at Github to address this issue:

Placeholders.js - An HTML5 placeholder attribute polyfill

To use it, it’s as simple as including the Javascript file on the page:

 <script src="caminho/para/Placeholders.js"></script>

^{Note: Requires no more framework additional, is native Javascript.}

The upside is you can have your own Markup duly updated using the attribute placeholder="X" and in the ancient navigators the Placeholders.js will ensure that everything works just like in modern browsers.

Here’s the support list you get when using it:

• Internet Explorer 6 - 9 (with Placeholders.js)
• Firefox 1 - 3 (with Placeholders.js), 4+ (native)
• Opera 7 - 10 (with Placeholders.js), 11+ (native)
• Safari 3.2 (with Placeholders.js), 4+ (native)
• Chrome 4+ (native)
• Flock 1.0+ (with Placeholders.js)
• Konqueror 4.3 (with Placeholders.js)
• Seamonkey 1+ (with Placeholders.js)
• Maxthon 1+ (with Placeholders.js)
• Slimbrowser 5 (with Placeholders.js)
• K-Meleon 0.7+ (with Placeholders.js)

Answer 2

you can do it this way:

jQuery("input[placeholder]").focus(function(){
  if ( jQuery(this).val() == jQuery(this).attr('placeholder') ){
    jQuery(this).removeClass('placeholder').val('');
  }
}).blur(function(){
  if ( jQuery(this).val() == '' ){
    jQuery(this).addClass('placeholder').val( jQuery(this).attr('placeholder') );
  }
}).trigger('blur');

input.placeholder{color: green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  Nome: <input type="text" name="nome" placeholder="Nome" /><br><br>
  Telefone: <input type="text" name="telefone" placeholder="Telefone" /><br><br>
  RG: <input type="text" name="rg" placeholder="RG" />
</form>

Answer 3

You can use the solution described in /a/5910/3635

Solution for Unsupported Browsers:

Using a function called placeholder():

function placeholder(str){
    $('input').css('color','#ccc');
    $('input').val(str);
}

You should run it once when loading your page:

placeholder("Digite o produto desejado...");

And you should assign these events to your input, which would be ao clicar nele(click) to clear its value, and ao sair dele(Blur) place the placeholder again.

$('input').on("click", function () {
  var ValorAnterior = $.cookie("ValorAtual") || "";
  $(this).val(ValorAnterior);
});
$('input').on("blur", function () {
  $.cookie("ValorAtual", $(this).val());
  placeholder("Digite o produto desejado...");
});

But you have to include the plugin jQuery Cookie (if you want to use another form of cookie is your option).