Texto de marcador de posición HTML en un formulario de texto

En uno de mis sitios web, he creado un formulario que recostack el nombre de la persona, el correo electrónico y una descripción de su idea.

Limité los caracteres de la descripción a 500 caracteres ya que no quiero leer mucho y descubrí cómo hacer que el texto aparezca en el área de texto antes de que el usuario ingrese lo que quiere.

Actualmente, el usuario debe eliminar la “Descripción de su idea”, pero quiero agregar la clase de marcador de posición donde borra lo que he escrito en el área de texto cuando hacen clic en el área de texto.

He buscado en algunos sitios y no pude encontrar la manera de usarlo, lo coloqué en mi código, pero por lo general la clase acaba de aparecer como texto dentro de mi área de texto.

Cualquier ayuda sobre el uso de esta clase sería genial gracias

Esto es lo que he escrito

Dentro de las tags de la cabeza

 function limitText(limitField, limitCount, limitNum) { if (limitField.value.length > limitNum) { limitField.value = limitField.value.substring(0, limitNum); } else { limitCount.value = limitNum - limitField.value.length; } }  

Dentro de las tags del cuerpo

 
Your Name:  
Your Email:  <input type="text" name="email"

(Maximum characters: 500)
You have characters left.

Echa un vistazo a http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html Creo que tiene lo que estás buscando.

Aquí hay una página simple que tiene un campo de correo electrónico que preparo rápidamente (extraído principalmente del tutorial).

       
Email:

El texto del título se coloca en el campo si está vacío y se elimina una vez que el usuario comienza a escribir.

Hay una función en HTML5 llamada ‘marcadores de posición’, que produce exactamente esta característica sin tener que hacer ninguna encoding en absoluto.

Todo lo que necesita hacer es agregar un atributo placeholder a su campo de formulario, de esta manera:

  

Tristemente, por supuesto, solo unos pocos navegadores lo admiten actualmente, pero pruébalo en Safari o Chrome para verlo en acción. La buena noticia es que se está agregando a prácticamente todos los navegadores en el futuro cercano.

Por supuesto, aún necesita atender usuarios con navegadores más antiguos, pero también puede utilizar la función en navegadores que pueden usarla.

Una buena forma de manejarlo es usar el atributo placeholder , y solo recurrir a la solución Javascript si el navegador no admite la función. La solución de Javascript puede tomar el texto del atributo placeholder , por lo que solo debe especificarlo en un lugar.

Consulte esta página para saber cómo detectar si la función placeholder es compatible: http://diveintohtml5.ep.io/detect.html

(o, como dice en esa página, simplemente use Modernizr )

El código de retorno de Javascript es bastante simple de implementar. Exactamente cómo lo haga dependerá de si desea utilizar JQuery o no, pero aquí hay enlaces a algunos ejemplos:

Y, por supuesto, Google le dará mucho más si busca la html5 placeholder fallback o algo similar.

Espero que ayude.