Foros del Web » Creando para Internet » Diseño web »

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

Estas en el tema de Cursor a la izquierda de una caja de texto, sin borrar su texto en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/06/2013, 18:31
Avatar de skyz  
Fecha de Ingreso: abril-2010
Mensajes: 170
Antigüedad: 14 años, 3 meses
Puntos: 1
Exclamación Cursor a la izquierda de una caja de texto, sin borrar su texto

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 original
  1. function ClickApareceDesapareceTexto(ObjCajaTexto,Texto)
  2. {
  3.   var ValorCajaTexto = ObjCajaTexto.value;
  4.    
  5.   if(ValorCajaTexto == Texto)
  6.     {
  7.       document.getElementById('user').value = '';
  8.       document.getElementById('user').className = 'Desaparece';
  9.     }
  10.    
  11.   if(ValorCajaTexto == '')
  12.     {
  13.       document.getElementById('user').value = Texto;
  14.       document.getElementById('user').className = 'Aparece';
  15.     }  
  16. }

Css

Código CSS:
Ver original
  1. .Aparece {
  2.     color: #666666;
  3.     font-style: italic;
  4. }
  5. .Desaparece{
  6.     color: #000099;
  7. }

Html

Código HTML:
Ver original
  1.     <input name="user" id="user" type="text" value="Usuario..." class="Aparece" onclick="ClickApareceDesapareceTexto(this,'Usuario...')" onblur="ClickApareceDesapareceTexto(this,'Usuario...')" size="20" >
  2. </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.
  #2 (permalink)  
Antiguo 18/06/2013, 19:18
Avatar de Mariano_Floyd  
Fecha de Ingreso: marzo-2013
Ubicación: Córdoba
Mensajes: 155
Antigüedad: 11 años, 4 meses
Puntos: 14
Respuesta: Cursor a la izquierda de una caja de texto, sin borrar su texto

No entiendo porque te complicaste tanto con js, si directamente con placeholder, agregandolo al html obtienes lo mismo, ej:
Cita:
<input type="email" id="mail" placeholder="Enter your E-Mail..." required/>
  #3 (permalink)  
Antiguo 18/06/2013, 20:09
Avatar de skyz  
Fecha de Ingreso: abril-2010
Mensajes: 170
Antigüedad: 14 años, 3 meses
Puntos: 1
Exclamación Respuesta: Cursor a la izquierda de una caja de texto, sin borrar su texto

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 Ver Mensaje
No entiendo porque te complicaste tanto con js, si directamente con placeholder, agregandolo al html obtienes lo mismo, ej:

Última edición por skyz; 18/06/2013 a las 20:15
  #4 (permalink)  
Antiguo 18/06/2013, 23:12
Avatar de Mariano_Floyd  
Fecha de Ingreso: marzo-2013
Ubicación: Córdoba
Mensajes: 155
Antigüedad: 11 años, 4 meses
Puntos: 14
Respuesta: Cursor a la izquierda de una caja de texto, sin borrar su texto

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.
  #5 (permalink)  
Antiguo 22/06/2013, 18:05
Avatar de skyz  
Fecha de Ingreso: abril-2010
Mensajes: 170
Antigüedad: 14 años, 3 meses
Puntos: 1
Respuesta: Cursor a la izquierda de una caja de texto, sin borrar su texto

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

Etiquetas: caja, css, cursor, html, imagenes, izquierda
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:23.