JMiur [E]

Es común utilizar etiquetas INPUT para que los usuarios ingresen alguna clase de dato, por ejemplo, buscar algo. Suelen ser etiquetas a las que no prestamos atención ni personalizamos aunque, como cualquier otra, admiten el uso de CSS (más información: 1 | 2).

Básicamente dicen esto aunque podrían tener más atributos:
<input type="text" value="" />
Y en estos ejemplos, todas tienen una clase con esta regla de estilo:
input.demos[type=text] {
  background: #FFF;
  border: 2px solid Chocolate;
  border-radius: 4px;
  color: #888;
  font-size: 20px;
  height: 32px;
  margin: 10px 0;
  padding: 0 10px;
  text-align: center;
  width: 300px;
}
Se vería así:


Así, sin nada extra, suele ocurrir que el usuario no sepa qué tipo de dato poner o que formato debería tener por lo que es común que se le adose esa información; si esto lo hacemos en el atributo value será incómodo ya que quien lo use, deberá borrar ese texto y luego poner el dato:
<input type="text" value="el texto por defecto" />

Para evitar eso, muchas veces debemos haber visto que se usan dos eventos extras: onblur y onfocus a los que se les agrega un poco de JavaScript que lo que hace es permutar el valor del atributo value, si el control no está activo y no hay nada agregado, se ve el texto por defecto y ese texto desaparece cuando hacemos click dentro para escribir algo.
<input type="text" value="el texto por defecto" onfocus="if (this.value=='el texto por defecto') this.value='';" onblur="if (this.value=='') this.value='el texto por defecto';" />

Funciona perfectamente pero es un código largo y engorroso que las nuevas técnicas del HTML5 y el CSS3 hacen innecesario ya que para eso, ahora podemos usar un nuevo atributo llamado placeholder que hará todo eso de modo automático aunque, en versiones de Internet Explorer viejas no tendrá ningún efecto:
<input type="text" placeholder="el texto por defecto" value="" />


También es posible personalizar placeholder para que se vea "distinto" pero, eso requiere el uso de propiedades con prefijos que son tres:

:-moz-placeholder {} /* para Firefox */
::-webkit-input-placeholder {} /* para Chrome */
:-ms-input-placeholder {} /* para Internet Explorer */


Lamentablemente, por ahora, las diferencias entre los navegadores también son varias; por ejemplo, en Firefox se pueden usar propiedades como background-color, border y padding pero en Chrome no o bien son mostradas de modo extraño. Además, se debe tener en cuenta que estas reglas de estilo hay que aplicarlas de modo individual y no pueden ser agrupadas:
input.demos:-moz-placeholder {
  background: #DDD;
  color: Chocolate;
  font-size: 16px;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 3px;
}
inputdemos::-webkit-input-placeholder {
  background: #DDD;
  color: Chocolate;
  font-size: 16px;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 3px;
}
input.demos:-ms-input-placeholder {
  background: #DDD;
  color: Chocolate;
  font-size: 16px;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 3px;
}

9 comentarios:

CristJian  

hey, justo ahora me estaba peleando con unos formularios de suscripción via email por este mismo asunto del codigo "largo y engorroso" jaja :P
con el placeholder ha sido "mas mejor y mejos pior" el asunto :)

Gracias por este dato JMiur, un saludo ;)

Responder
k_nelita  

Hola JM como va tanto tiempo que no escribo por tu blog?? Tengo un problemita que no tiene nada que ver con esta entrada.
Hace tres días que no me funciona bien el editor de entradas de ninguno de mis blogs, el asunto es que no me deja subir videos ni fotos, es un poco difícil de explicar, dentro del editor al pinchar en subir video se abre la ventana de siempre pero en blanco, lo mismo para subir fotos, pero lo de las fotos las puedo subir desde el html, pero para videos solo está la opción en "redactar" y no puedo...
Hice una captura para ilustrarte porque es complicado de explicar, te la mando por mail?
Desde ya mil gracias ;-)

Responder
JMiur  

En realidad, si el problema es el editor,no hay mucho que pueda hacerse porque es algo interno de Blogger.

Podrías probar usando otro navegador, borrando la cache o incluso, usando un modelo de editor distinto ya que puede seleccionarse entre varios en la Configuración del blog.

Responder
Jonathan Coreas  

Muy impresionante la información

Responder
k_nelita  

Mirá JMiur acabo de probar con Firefox y hace otras cosas raras, sube el video pero sin cerrar la ventana de subida, o sea no me deja mas que esperar que termine de subir sin poder hacer nada mas, pero eso no sería nada, cuando termina se cierra la ventana y el video no está en el post... mi no entender nada...

Probé de cambiar al viejo editor, porque no hay mas que dos en configuración, el viejo y el nuevo, y nada todo igual...

La cahé, cookies y todo eso lo limpio diariamente y hace tres días que mi Chrome funciona así de mal... Ya no se que hacer...

Ahh yo todavía estoy usando el viejo modelo de Draft blogger, aunque también probé de usar el nuevo con el mismo resultado...

Pregunté a un par de blogueras amigas para ver si les pasaba lo mismo y no, soy solo yo, por lo visto a vos tampoco te pasa...

Y ahora quien podrá defen... digo ayudarme?? El Chapulín Colorado ya se retiró no? :-)

Responder
JMiur  

Pues nada puedo decirte al respecto, k_nelita; efectivamente, no me ha ocurrido eso y no he recibido comentarios al respecto; sólo se me ocurre actualizar el navegador haciendo una instalación limpia, es decir, desinstalándolo previamente y borrando las carpetas internas y ver si eso soluciona el problema.

Responder
k_nelita  

Hola JM, anteayer lo hice, desinstalé todo el Chrome y lo volví a bajar, perdí todos los marcadores... todo... quedó limpio.
En un momento, un rato, funcionó bien el editor, pero al rato ya no y sigue igual que antes, las fotos las puedo subir desde el editor en modo html solamente y los videos no puedo en ningún lado solo en un servidor externo y pegar el código con toda la pérdida de tiempo que eso implica :-(

Lo que también hice fue actualizar el FireFox, que tenía el 7, ahora el 10 y ahí si puedo subir todo, pero no me gusta usarlo, es muy lento...

Con respecto a lo que decís de instalación limpia, eliminando carpetas, en mi Windows 7 Starter no guarda carpetas, dice unistal y borra todo, eso hice...

Responder
JMiur  

En Windows7 las carpetas de los perfiles estan acá:

C:\Users\NOMBRE_USUARIO\AppData\Local\Google\Chrome\User Data\
C:\Users\NOMBRE_USUARIO\AppData\Roaming\Mozilla\Firefox\Profiles\

Si el problema sólo ocurre en Chrome, ya es cosa del navegador, plugin o extensión que tengas instalada.

Responder
Lautarorx  

Por eso yo siempre usé Firefox...

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR