Marcador de posición de texto HTML5 no aparece

No puedo averiguar qué está mal con mi marcado, pero el marcador de posición para el área de texto no aparecerá. Parece como si pudiera estar cubierto con algunos espacios en blanco y tabs. Cuando se centra en el área de texto y elimina desde donde se coloca el cursor, abandone el área de texto y aparecerá el marcador de posición adecuado.

     



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

Este siempre ha sido un gotcha para mí y para muchos otros. En resumen, las tags de apertura y cierre para el 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:

  

Malo:

  

Elimine todos los espacios y saltos de línea entre las tags abrir y cerrar .

  ///Correct one  ///Bad one It's treats as a value so browser won't display the Placeholder value  ///Bad one 

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

Bueno, técnicamente no tiene que estar en la misma línea, siempre y cuando no haya un carácter entre la terminación “>” de la etiqueta de inicio y el comienzo “<" de la etiqueta de cierre. Es necesario terminar con …> como en el siguiente ejemplo:

 

use lugar de dejar un espacio entre las tags de apertura y cierre como

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

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

  **PlaceHolder Appears**  **PlaceHolder Doesn't Appear**    

Tuve el mismo problema, solo usando un archivo .pug (similar a .jade ). Me di cuenta de que también era un problema de espacio , después del final de mi 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