O espaço reservado para a área de texto HTML5 não está aparecendo

183

Não consigo descobrir o que há de errado com minha marcação, mas o espaço reservado para a área de texto não aparecerá. Parece que pode estar coberto com alguns espaços em branco e tabulações. Quando você se concentra na área de texto e exclui de onde o cursor se coloca, deixe a área de texto e o espaço reservado apropriado será exibido.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
    </head>

    <body>

    <form action="message.php" method="post" id="message_form">
        <fieldset>

            <input type="email" name="email" id="email" title="Email address"
                maxlength="40"
                placeholder="Email Address" 
                autocomplete="off" required />
            <br />
            <input type="text" 
                name="subject" 
                id="subject" title="Subject"
                maxlength="60" placeholder="Subject" autocomplete="off" required />
            <br />
            <textarea name="message" 
                id="message" 
                title="Message" 
                cols="30" 
                rows="5" 
                maxlength="100" 
                placeholder="Message" required>
            </textarea>
            <br />
            <input type="submit" value="Send" id="submit"/>

        </fieldset>
    </form>
</body>

<script>

$(document).ready(function() {        
    $('#message_form').html5form({
        allBrowsers : true,
        responseDiv : '#response',
        messages: 'en',
        messages: 'es',
        method : 'GET',
        colorOn :'#d2d2d2',
        colorOff :'#000'
    }
);
});

</script>

</html>

— rojobuffalo
fonte

2

Parece funcionar bem: jsfiddle.net/3BzBk ... Não coloque o script fora do corpo :)

— Marco Johannesen

2

Qual navegador você está usando? Nem todos os navegadores suportam o atributo de espaço reservado

— Xharze

Você sempre pode usar os eventos onfocus e onblur para obter o mesmo efeito. Além disso, você pode testar se o espaço reservado é suportado pelo navegador ou não, usando uma função como: function placeholderIsSupported () {test = document.createElement ('input'); retorno ('espaço reservado' no teste); }

— gentrobot

1

@MarcoJohannesen Thank you! Ainda não sei exatamente o que é diferente, mas funciona agora.

— Rojobuffalo 17/04

1

@ user1338065 Super. Foi porque foi colocado fora do corpo ou?

— Marco Johannesen

670

Este sempre foi um problema para mim e para muitos outros. Em resumo, as tags de abertura e fechamento do <textarea>elemento devem estar na mesma linha, caso contrário, um caractere de nova linha o ocupará. Portanto, o espaço reservado não será exibido, pois a área de entrada contém conteúdo (um caractere de nova linha é, tecnicamente, um conteúdo válido).

Boa:

<textarea></textarea>

Ruim:

<textarea>
</textarea>

Atualização (2020)

Isso não é mais verdade , de acordo com a especificação de análise do HTML5:

If the next token is a U+000A LINE FEED (LF) character token, 
then ignore that token and move on to the next one. (Newlines 
at the start of textarea elements are ignored as an authoring 
convenience.)

Você ainda pode ter problemas se o editor insistir em terminar as linhas com o CRLF.

— Aquarelle
fonte

66

Cara, essa resposta foi tão direta que eu não acreditava que fosse verdade! Mas eu testei por mim mesmo e, com certeza, o espaço em branco dentro de uma área de texto é considerado conteúdo - impedindo que o espaço reservado seja exibido.

— Eric L.

Se o plug-in foi editado, você pode corrigir esse problema usando o .trimmétodo do jQuery .

— SpYk3HH 19/09/2013

Um exemplo, seria a de simplesmente adicionar um pedaço de JS (antes ou depois do plugin chamada, não importa) que se parece com o seguinte:$('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });

— SpYk3HH

Além disso, ao criar um novo elemento de área de texto após o carregamento do DOM, inclua a marca de fechamento em />vez de >. Exemplo:$('body').html('<textarea placeholder="test" />');

— degenerado

se houver um espaço em branco no interior, <textarea>isso significa que a área de texto não está vazia; portanto, não há uso para um espaço reservado. :)

— Edu Ruiz

42

Exclua todos os espaços e quebras de linha entre <textarea>as </textarea>tags de abertura e fechamento .

<textarea placeholder="YOUR TEXT"></textarea>  ///Correct one

<textarea placeholder="YOUR TEXT"> </textarea>  ///Bad one It's treats as a value so browser won't display the Placeholder value

<textarea placeholder="YOUR TEXT"> 
</textarea>  ///Bad one

— Desenvolvedor-chefe
fonte

O espaço mata isso? Esquisito.

— AndrewLeonardi

2

Trata o espaço como um valor.

— Desenvolvedor Líder

9

é porque existe um espaço em algum lugar. Eu estava usando jsfiddle e havia um espaço após a tag. Depois que eu apaguei o espaço, ele começou a funcionar

— Mateus
fonte

Uau! Eu tinha a tag textarea de fechamento na linha seguinte, recuou 4 espaços> esses espaços invisíveis estão na área de texting, mas não percebi isso até tentar usar o espaço reservado. Não há espaços entre as tags de área de abertura e fechamento!

— DOK

5

Bem, tecnicamente, ele não precisa estar na mesma linha, desde que não exista um caractere entre o final ">" da marca inicial e o "<" inicial na marca de fechamento. Ou seja, você precisa terminar ...></textarea>como no exemplo abaixo:

<p><label>Comments:<br>
       <textarea id = "comments" rows = "4" cols = "36" 
            placeholder = "Enter comments here"
            class = "valid"></textarea>
    </label>
</p>

— Conny P
fonte

3

Eu sei que este post foi (muito bem) respondido por Aquarelle, mas caso alguém esteja tendo esse problema com outros formulários de tags sem texto, como entradas, deixarei isso aqui:

Se você tiver uma entrada em seu formulário e o espaço reservado não estiver sendo exibido devido a um espaço em branco no início, isso pode ser causado pelo atributo "valor". Caso você esteja usando variáveis para preencher o valor de uma entrada, verifique se não há espaços em branco entre as vírgulas e as variáveis.

exemplo usando o galho para o php framework symfony:

<input type="text" name="subject" value="{{ subject }}" placeholder="hello" />       <-- this is ok
<input type="text" name="subject" value" {{ subject }} " placeholder="hello" />      <-- this will not show placeholder

Nesse caso, a tag entre {{}} é a variável, apenas certifique-se de não deixar espaços entre as vírgulas porque o espaço em branco também é um caractere válido.

— SpicyTacos23
fonte

2

use em <textarea></textarea>vez de deixar um espaço entre as tags de abertura e fechamento como<textarea> </textarea>

— Ainda
fonte

4

Isso não adiciona nada que as respostas existentes ainda não abordem.

— Todos os trabalhadores são essenciais

0

Entre a tag de abertura e fechamento, no nosso caso, a tag da área de texto não deve conter espaço ou caractere de nova linha ou qualquer texto (valor).

Se houver espaço, caractere de nova linha ou qualquer texto, será considerado um valor que substitui o espaço reservado.

    **PlaceHolder Appears**
    <textarea placeholder="Am Default Message"></textarea>

    **PlaceHolder Doesn't Appear**

    <textarea placeholder="Am Default Message">  </textarea>
   <textarea placeholder="Am Default Message"> 
   </textarea>
   <textarea placeholder="Am Default Message">Something</textarea>

— Yergalem
fonte

0

Eu tive o mesmo problema, apenas usando um .pugarquivo (semelhante a .jade). Percebi que também era uma questão de espaço , após o final dos meus parênteses de fechamento. No meu exemplo, você precisa destacar o texto depois (placeholder="YOUR MESSAGE")para ver:

ANTES:

form.form-horizontal(method='POST')
  .form-group
    textarea.form-control(placeholder="YOUR MESSAGE") 
  .form-group  
    button.btn.btn-primary(type='submit') SUBMIT

DEPOIS DE:

form.form-horizontal(method='POST')
  .form-group
    textarea.form-control(placeholder="YOUR MESSAGE")
  .form-group  
    button.btn.btn-primary(type='submit') SUBMIT

— maudulus
fonte

-1

Então, a questão agora é como preenchemos o elemento textarea? XYZ, você receberá:

O principal problema é que no elemento textarea estamos pré-intencionalmente preenchendo o elemento por espaço em branco.

— Hani
fonte