Placeholder does not work in Textarea [closed]

Question

Placeholder does not work in Textarea [closed]

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)

2

I have form with textarea , I put a placeholder in the input and it works perfectly, less in 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's wrong?

html jquery

asked by anonymous 05.12.2014 / 13:03

3 answers

1

It does not work because you already have a content in it. Just pull 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>

05.12.2014 / 13:13

1

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.

That is, this works:

<textarea></textarea>

This does not work:

<textarea>
</textarea>

Not even this:

<textarea> </textarea>

So whenever there is content inside the opening and closing of the tag will not work, this includes the text you added and should not be there:

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

Your code will work: link

05.12.2014 / 13:14

How to control the flow when an invalid value is entered? Function giving wrong values

score 3 · Accepted Answer

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

<textarea type="text" id="trabalheConoscoObs" name="trabalheConoscoObs" placeholder="observações"> observações </textarea>

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

Note: Remember to never leave any space or any predefined character type when using placeholder.