Placeholder does not work in Textarea

Question

I have a form with a textarea, put a placeholder us input and is working perfectly, except in the textearea.

<form name="trabalheConoscoFormulario" id="trabalheConoscoFormulario" action="" method="post" onsubmit="return trabalheConoscoForm();">
    <div class="grid_210 f-left">
        <input type="text" placeholder="nome*" />
        <input type="text" placeholder="e-mail*" />
        <input type="text" placeholder="telefone" />
        <input class="grid_150 f-left" type="text" placeholder="cidade" />
        <input class="grid_55 f-right" type="text" placeholder="UF" />
        <div class="clear"></div>
        <div class="flechaPreta flechaBrancaTrabalhe margin-top-10 cp"></div>
    </div>
    <div class="grid_210 f-right">
        <div class="trabalheConoscoAnexo cp">anexar curr&iacute;culo</div>
        <input style="display:none" type="file" class="trabalheConoscoAnexoInput" id="curriculoForm" name="curriculoForm" value="" />
        <textarea type="text" id="trabalheConoscoObs" name="trabalheConoscoObs" placeholder="observa&ccedil;&otilde;es">observa&ccedil;&otilde;es</textarea>
    </div>
</form>

Jquery:

function add() {
    if ($(this).val() == '') {
        $(this).val($(this).attr('placeholder')).addClass('placeholder');
    }
}

function remove() {
    if ($(this).val() == $(this).attr('placeholder')) {
        $(this).val('').removeClass('placeholder');
    }
}
if (!('placeholder' in $('<input>')[0])) { // Create a dummy element for feature detection
    $('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add); 
    $('form').submit(function () {
        $(this).find('input[placeholder], textarea[placeholder]').each(remove);
    }); 
}

What is wrong?

Answer 1

Your problem is one, you have a predefined text within your <textarea>:

<textarea type="text" id="trabalheConoscoObs" name="trabalheConoscoObs" placeholder="observa&ccedil;&otilde;es">observa&ccedil;&otilde;es</textarea>

Remove the bold part (your predefined text) and it will work.

Note: remember to never leave any space or any kind of preset character when using placeholder.

Answer 2

It doesn’t work because you’ve already included a content in it. Just take that works normal:

<form name="trabalheConoscoFormulario" id="trabalheConoscoFormulario" action="" method="post" onsubmit="return trabalheConoscoForm();">
    <div class="grid_210 f-left">
        <input type="text" placeholder="nome*" />
        <input type="text" placeholder="e-mail*" />
        <input type="text" placeholder="telefone" />
        <input class="grid_150 f-left" type="text" placeholder="cidade" />
        <input class="grid_55 f-right" type="text" placeholder="UF" />
        <div class="clear"></div>
        <div class="flechaPreta flechaBrancaTrabalhe margin-top-10 cp"></div>
    </div>
    <div class="grid_210 f-right">
        <div class="trabalheConoscoAnexo cp">anexar curr&iacute;culo</div>
        <input style="display:none" type="file" class="trabalheConoscoAnexoInput" id="curriculoForm" name="curriculoForm" value="" />
        <textarea type="text" id="trabalheConoscoObs" name="trabalheConoscoObs" placeholder="observa&ccedil;&otilde;es"></textarea>
    </div>
</form>

Answer 3

A common problem with textarea is that the placeholder does not work if there is a space or line break between the opening and closing tag of the textarea.

I mean, this works:

<textarea></textarea>

This doesn’t work:

<textarea>
</textarea>

Nor this:

<textarea> </textarea>

So whenever there is content inside the opening and closing tag will not work, it includes the text you added and shouldn’t be there:

placeholder="observa&ccedil;&otilde;es">observa&ccedil;&otilde;es</textarea>

Your code is working: http://jsfiddle.net/2sv1x34c/