El marcador de posición de área de texto HTML5 no aparece

183

No puedo entender qué está mal con mi marcado, pero el marcador de posición para el área de texto no aparecerá. Parece que puede estar cubierto con algunos espacios en blanco y pestañas. Cuando se enfoca en el área de texto y elimina desde donde se coloca el cursor, luego abandona el área de texto, aparece el marcador de posición adecuado.

<!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
fuente

2

Parece funcionar bien: jsfiddle.net/3BzBk ... No coloque el guión fuera del cuerpo :)

— Marco Johannesen

2

¿Qué navegador estás usando? No todos los navegadores admiten el atributo de marcador de posición

— Xharze

Siempre puede usar los eventos onfocus y onblur para obtener el mismo efecto. Además, puede probar si el navegador admite o no el marcador de posición utilizando una función como: function placeholderIsSupported () {test = document.createElement ('input'); return ('marcador de posición' en la prueba); }

— gentrobot

1

@MarcoJohannesen ¡Gracias! Todavía no puedo decir exactamente qué es diferente, pero funciona ahora.

— rojobuffalo

1

@ user1338065 Súper. ¿Fue porque se colocó fuera del cuerpo o?

— Marco Johannesen

671

Este siempre ha sido un problema para mí y para muchos otros. En resumen, las etiquetas de apertura y cierre para el <textarea>elemento deben estar en la misma línea, de lo contrario, un carácter de nueva línea lo ocupa. Por lo tanto, el marcador de posición no se mostrará ya que el área de entrada contiene contenido (un carácter de nueva línea es, técnicamente, contenido válido).

Bueno:

<textarea></textarea>

Malo:

<textarea>
</textarea>

Actualización (2020)

Esto ya no es cierto , de acuerdo con la especificación de análisis 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.)

Sin embargo, es posible que aún tenga problemas si su editor insiste en terminar las líneas con CRLF.

— Acuarela
fuente

66

Hombre, esta respuesta fue tan directa, ¡no creía que fuera verdad! Pero lo probé por mí mismo y, efectivamente, el espacio en blanco dentro de un área de texto se considera contenido, evitando que se muestre el marcador de posición.

— Eric L.

Si se editó el complemento, puede solucionar este problema utilizando el .trimmétodo de jQuery .

— SpYk3HH

Un ejemplo sería simplemente agregar una pieza a JS (antes o después de la llamada del complemento, no importa) que $('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });

— tenga

Además, al crear un nuevo elemento de área de texto después de cargar el DOM, asegúrese de incluir la etiqueta de cierre en />lugar de >. Ejemplo:$('body').html('<textarea placeholder="test" />');

— degenerado

Si hay un espacio en blanco dentro <textarea>, significa que el área de texto no está vacía, por lo tanto, no hay uso para un marcador de posición. :)

— Edu Ruiz

43

Elimine todos los espacios y saltos de línea entre <textarea>las </textarea>etiquetas de apertura y cierre .

<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

— Desarrollador principal
fuente

El espacio lo mata? Extraño.

— AndrewLeonardi

2

Trata el espacio como un valor.

— Desarrollador principal el

9

es porque hay un espacio en alguna parte. Estaba usando jsfiddle y había un espacio después de la etiqueta. Después de eliminar el espacio, comenzó a funcionar

— Mateo
fuente

¡Guauu! Tenía la etiqueta de área de texto de cierre en la siguiente línea, sangría 4 espacios> esos espacios invisibles están en el área de texto, pero no me di cuenta hasta que intenté usar el marcador de posición. ¡No hay espacios entre las etiquetas de área de texto de apertura y cierre!

— DOK

5

Bueno, técnicamente no tiene que estar en la misma línea siempre que no haya caracteres entre el final ">" de la etiqueta de inicio y el "<" de inicio de la etiqueta de cierre. Es necesario terminar con ...></textarea>el siguiente ejemplo:

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

— Conny P
fuente

3

Sé que esta publicación ha sido (muy bien) respondida por Aquarelle, pero en caso de que alguien tenga este problema con otros formularios de etiquetas sin texto como entradas, lo dejaré aquí:

Si tiene una entrada en su formulario y el marcador de posición no se muestra porque hay un espacio en blanco al principio, esto puede ser causado por su atributo de "valor". En caso de que esté utilizando variables para completar el valor de una entrada, verifique que no haya espacios en blanco entre las comas y las variables.

ejemplo usando twig para 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

En este caso, la etiqueta entre {{}} es la variable, solo asegúrese de no dejar espacios entre las comas porque el espacio en blanco también es un carácter válido.

— SpicyTacos23
fuente

2

use en <textarea></textarea>lugar de dejar un espacio entre las etiquetas de apertura y cierre como<textarea> </textarea>

— Todavía
fuente

44

Esto no agrega nada que las respuestas existentes aún no aborden.

— Todos los trabajadores son esenciales

0

Entre la etiqueta de apertura y cierre en nuestro caso, la etiqueta textarea no debe ser espacio o carácter de nueva línea o cualquier texto (valor).

Si hay espacio, carácter de nueva línea o cualquier texto, se considera un valor que anula el marcador de posición.

    **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
fuente

0

Tuve el mismo problema, solo usando un .pugarchivo (similar a .jade). Me di cuenta de que también era un problema espacial , después del final de mis paréntesis de cierre. En mi ejemplo, debe resaltar el texto después (placeholder="YOUR MESSAGE")para ver:

ANTES DE:

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

DESPUÉS:

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

— maudulus
fuente

-1

Entonces, la pregunta ahora es ¿cómo rellenamos previamente el elemento textarea? XYZ, obtendrás:

El principal problema es que en el elemento textarea estamos rellenando involuntariamente el elemento con espacios en blanco.

— Hani
fuente