Cursor a la izquierda de una caja de texto, sin borrar su texto

skyz · #1 (**permalink**) 18/06/2013, 18:31

Saludos comunidad tengo la siguiente duda:

He creado el efecto que tienen las cajas de texto de la pagina de inscripcion de facebook (en la caja de texto tiene un texto descriptivo y al darle click desaparece el texto descriptivo, si la caja de texto no tiene nada escrito y el foco esta fuera de la caja de texto aparece de nuevo el texto descriptivo), aqui el codigo funcional:

JavaScript

Código Javascript:

Ver originalfunction ClickApareceDesapareceTexto(ObjCajaTexto,Texto)
{
  var ValorCajaTexto = ObjCajaTexto.value;
   
  if(ValorCajaTexto == Texto)
    {
      document.getElementById('user').value = '';
      document.getElementById('user').className = 'Desaparece';
    }
    
  if(ValorCajaTexto == '')
    {
      document.getElementById('user').value = Texto;
      document.getElementById('user').className = 'Aparece';
    }   
}

Css

Código CSS:

Ver original.Aparece {
    color: #666666;
    font-style: italic;
}
.Desaparece{
    color: #000099;
}

Html

Código HTML:

Ver original<body>
    <input name="user" id="user" type="text" value="Usuario..." class="Aparece" onclick="ClickApareceDesapareceTexto(this,'Usuario...')" onblur="ClickApareceDesapareceTexto(this,'Usuario...')" size="20" >
</body>

La duda es como realizar el comportamiento de darle click a la caja de texto y me muestre el cursor parpadeando y el texto descriptivo no desaparesca, como se lo puede ver en las cajas de texto del formulario de Facebook

:

porque el codigo que coloque no realiza dicho efecto

.

Si no es el foro adecuado donde deberia ir esta pregunta, cambiarlo porfavor al lugar correcto.

Gracias por su tiempo.

Mariano_Floyd · #2 (**permalink**) 18/06/2013, 19:18

No entiendo porque te complicaste tanto con js, si directamente con placeholder, agregandolo al html obtienes lo mismo, ej:

Cita:

skyz · #3 (**permalink**) 18/06/2013, 20:09

Esta bien pero hay un problema con Html 5, en Internet Explorer 8 y Opera Ultima Version no funciona, muestra la caja de texto vacia? por eso realice dicho codigo, por ejemplo en facebook navegando con IE 8 y Opera, sigue mostrando el efecto que menciono en la imagen de arriba o hay algun codigo para que funcione adecuadamente en navegadores no tan modernos, todavia hay mucha gente que sigue utilizando Windows XP para IE 8.

saludos

Cita:

Iniciado por Mariano_Floyd

No entiendo porque te complicaste tanto con js, si directamente con placeholder, agregandolo al html obtienes lo mismo, ej:

Mariano_Floyd · #4 (**permalink**) 18/06/2013, 23:12

En opera si que funciona, acabo de testearlo. Para ie 8 puedes utilizar modernizr. Intenta utilizar js solo cuando sea necesario, piensa que así como existe gente que utiliza xp, también existe gente que navega con js desactivado.
Saludos.

skyz · #5 (**permalink**) 22/06/2013, 18:05

Muchas Gracias Mariano_Floyd, por el dato de modernizr.

Utilize modernizr, funciona ahora en IE 8 lo que requiero, pero el modernizr trabaja con css y javascript para ayudar a visualizar los efectos en navegadores antiguos, segun veo hace el mismo efecto con: JQuery, Jquery Placeholder. al darle click a la caja de texto desaparece la informacion, realiza lo que realice con el codigo javascript del primer mensaje de este post, pero todavia no se queda el cursor con al lado izquierdo como realiza la propiedad placeholder de HTML 5, como en la imagen:

Entrando a Facebook desde IE 8, pues esta la propiedad placeholder totalmente correcta:

http://fotos.subefotos.com/28c0e308d...cb89b71cco.png