2

Tenho um form com um textarea, coloquei um placeholder nos input e está funcionando perfeitamente, menos no 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);
    }); 
}

O que está errado?

2
  • 1
    Não seria porque tem um texto já pré digitando dentro do seu <textarea> ? <textarea type="text" id="trabalheConoscoObs" name="trabalheConoscoObs" placeholder="observa&ccedil;&otilde;es"> observa&ccedil;&otilde;es </textarea> haha :) 5/12/2014 às 12:10
  • CARACA @PauloRoberto como eu não vi isso! ahahaah valeu 5/12/2014 às 12:12

3 Respostas 3

3

Seu problema é um só, você tem um texto pré-definido dentro do seu <textarea>:

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

Remova a parte em negrito (seu texto pré-definido) e irá funcionar.

Obs: lembre-se de nunca deixar nenhum espaço ou qualquer tipo de caractere pré-definido quando for utilizar placeholder.

1

Não funciona por que você já incluiu um conteúdo nele. É só tirar que funciona 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>

1

Um problema comum com as textarea é que o placeholder não funciona se houver um espaço ou quebra de linha entre a tag de abertura e fecho da textarea.

Ou seja, isto funciona:

<textarea></textarea>

Isto não funciona:

<textarea>
</textarea>

Nem isto:

<textarea> </textarea>

Portanto sempre que houver conteudo dentro da abertura e fecho da tag não vai funcionar, isso inclui o texto que adicionou e não deveria estar lá:

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

O seu código a funcionar: http://jsfiddle.net/2sv1x34c/

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .