input text color del value default

[Ciel]

Hola a todos,

Recien buscando por el foro logre encontrar lo que queria, que era vaciar el value del input text al clickear en el mismo. Y este es el codigo:

Código Javascript:

<script type="text/javascript">  
 
function textArea_blur(TxtArea,TxtInicial)  
{   
    if(TxtArea.value == "")  
    {  
        TxtArea.value = TxtInicial;  
    } 
}  
 
function textArea_focus(TxtArea,TxtInicial)  
{  
    if(TxtArea.value == TxtInicial)  
    {  
        TxtArea.value="";  
    }  
}  
 
</script>
 
<input type="text" size="12" value="usuario" onBlur="textArea_blur(this,this.defaultValue)" onFocus="textArea_focus(this,this.defaultValue)" />
<input type="password" size="12" value="contraseña" onBlur="textArea_blur(this,this.defaultValue)" onFocus="textArea_focus(this,this.defaultValue)" />
 

Lo unico que me faltaria saber, que no lo pude encontrar en el foro... es que el color de los values defaults que pongo sean distintos al color del texto que el usuario escribe, se entiende?

Gracias de antemano.

[IEKK]

haz lo mismo pero usando jquery y ya sólo cambia las propiedades de los input con el método .css()y usando los eventos focus y blur

http://api.jquery.com/focus/

http://api.jquery.com/css/

[caricatos]

Hola:

Con tu mismo código, dependiendo que quieras cambiar el color del texto o del fondo...

if(TxtArea.value == TxtInicial) {
TxtArea.style.color= colorInicial;
}

Para el fondo, en vez de style.color, sería style.backgroundColor....


Qué manía con presentar soluciones cargando librerías...

Saludos

[Ciel]

Gracias a los 2.

@ IEKK, no quiero criticarte nada ya que se poco y nada sobre Javascript y su framework jQuery, pero no se supone que es medio innecesario usar jQuery en algo tan simple como esto? o me equivoco?

Lo que probe recien fue lo que dijo caricatos... y el codigo quedo asi:

Código Javascript:

<script type="text/javascript">  
 
function textArea_blur(TxtArea,TxtInicial)  
{   
    if(TxtArea.value == "")  
    {  
        TxtArea.value = TxtInicial;
        TxtArea.style.color='#848484'
    } 
}  
 
function textArea_focus(TxtArea,TxtInicial)  
{  
    if(TxtArea.value == TxtInicial)  
    {  
        TxtArea.value="";  
        TxtArea.style.color = '#000000';
    }  
}  
 
</script>  
 
<input style="color:#848484;" type="text" size="12" value="usuario" onBlur="textArea_blur(this,this.defaultValue)" onFocus="textArea_focus(this,this.defaultValue)" />
<input style="color:#848484;" type="password" size="12" value="contraseña" onBlur="textArea_blur(this,this.defaultValue)" onFocus="textArea_focus(this,this.defaultValue)" />
 

El style="color:#848484;" lo puse ya que sino por default no se ponia ese color, tenia que clickear en el input text y deseleccionarlo. Use style en la etiqueta para mostrarlo aca, sin embargo lo uso en el CSS.

Alguna correccion o recomendacion sobre este codigo?

Gracias de antemano.

[IEKK]

Iniciado por Ciel

Gracias a los 2.

@ IEKK, no quiero criticarte nada ya que se poco y nada sobre Javascript y su framework jQuery, pero no se supone que es medio innecesario usar jQuery en algo tan simple como esto? o me equivoco?

Lo que probe recien fue lo que dijo caricatos... y el codigo quedo asi:

Código Javascript:

<script type="text/javascript">  
 
function textArea_blur(TxtArea,TxtInicial)  
{   
    if(TxtArea.value == "")  
    {  
        TxtArea.value = TxtInicial;
        TxtArea.style.color='#848484'
    } 
}  
 
function textArea_focus(TxtArea,TxtInicial)  
{  
    if(TxtArea.value == TxtInicial)  
    {  
        TxtArea.value="";  
        TxtArea.style.color = '#000000';
    }  
}  
 
</script>  
 
<input style="color:#848484;" type="text" size="12" value="usuario" onBlur="textArea_blur(this,this.defaultValue)" onFocus="textArea_focus(this,this.defaultValue)" />
<input style="color:#848484;" type="password" size="12" value="contraseña" onBlur="textArea_blur(this,this.defaultValue)" onFocus="textArea_focus(this,this.defaultValue)" />
 

El style="color:#848484;" lo puse ya que sino por default no se ponia ese color, tenia que clickear en el input text y deseleccionarlo. Use style en la etiqueta para mostrarlo aca, sin embargo lo uso en el CSS.

Alguna correccion o recomendacion sobre este codigo?

Gracias de antemano.

Es una cuestión de líneas.
Si tu quieres poner todo eso dentro de los input tú mismo. Jquery no deja de ser javascript. Además sólo proporcione una idea.
Pero sí, yo prefiero tener un .js aparte con el código necesario e incluirlo en cada página, y que sólo contenga el evento y una línea más para cambiar las propiedades.
Sobre todo con la idea de no tener que poner eso si debo usarlo en todos los input de toodas las páginas.
Para gustos colores, así de simple.

[Panino5001]

Es una cuestión de líneas.
Si tu quieres poner todo eso dentro de los input tú mismo. Jquery no deja de ser javascript. Además sólo proporcione una idea.
Pero sí, yo prefiero tener un .js aparte con el código necesario e incluirlo en cada página, y que sólo contenga el evento y una línea más para cambiar las propiedades.
Sobre todo con la idea de no tener que poner eso si debo usarlo en todos los input de toodas las páginas.
Para gustos colores, así de simple.

Tu argumento es inválido: es posible mantener el código javascript que haga esto, separado del html del body igualmente y con muy pocas líneas (muchísimas menos que las que tiene jQuery), usando sólo javascript.

[IEKK]

Iniciado por Panino5001

Tu argumento es inválido: es posible mantener el código javascript que haga esto, separado del html del body igualmente y con muy pocas líneas (muchísimas menos que las que tiene jQuery), usando sólo javascript.

Mi argumento es válido.
3 líneas y sin meter nada en los input. Yo lo veo más limpio. Y por supuesto que se puede separar el javascript si digo que se puede con jquery, pero compara...

Código Javascript:

<input type="text" value="aaa"/>
 
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
<script type='text/javascript'>
$('input[type="text"]').click(function(){$(this).val("");});
$('input[type="text"]').focus(function(){$(this).css("color","red");});
$('input[type="text"]').blur(function(){$(this).css("color","black");});
</script>
 

Edito: inclusive te la dejo en dos, quitando el click ya que le basta con el focus pero la dejo por si no quiere que el texto se vaya cuando un usuario use el tab para moverse.

[zerokilled]

Iniciado por IEKK

Mi argumento es válido.
3 líneas y sin meter nada en los input

¿has considerado que ademas de las 3 líneas el navegador debe cargar jquery? ciertamente jquery no esta compuesto de 3 líneas. es un desperdicio de recursos, no solo de ancho de banda sino de procesador y memoria. por supuesto, con esto no quiero decir que las librerias son malas.

[Panino5001]

Esa no es la comparación que deberías hacer si hablamos de líneas y código. Deberías incluir todas las líneas de jQuery (todas las que aparecen aquí) en tu código para ver en definitiva la verdadera longitud de tu código y el esfuerzo que debe hacer tu navegador para interpretar eso. Yo no pude hacerlo para mostrártelo porque ocupa 72718 caracteres y excede la capacidad máxima de caracteres de un mensaje, pero te invito a que lo hagas: se ve muy diferente de esa manera.

(Se me adelantó zerokilled (hola, amigo!))

[IEKK]

Iniciado por Panino5001

Esa no es la comparación que deberías hacer si hablamos de líneas y código. Deberías incluir todas las líneas de jQuery (todas las que aparecen aquí) en tu código para ver en definitiva la verdadera longitud de tu código y el esfuerzo que debe hacer tu navegador para interpretar eso. Yo no pude hacerlo para mostrártelo porque ocupa 72718 caracteres y excede la capacidad máxima de caracteres de un mensaje, pero te invito a que lo hagas: se ve muy diferente de esa manera.

(Se me adelantó zerokilled (hola, amigo!))

Jquery es un framwork está claro que como tal será larguito. Yo no hablo de líneas a cargar. Sino de limpieza y orden en el código. Si ustedes prefieren un input largo como una salchicha bien por ustedes. Como dije para gustos colores. Solo aporte una idea. Además ¿Qué conexión se resentiría por unos kb? Si fuera pesado no se usaría.

[Ciel]

El tema es que yo ya tengo incluido el jQuery en la web que estoy haciendo, por lo tanto en este caso me sirve eso, cierto?

[IEKK]

Iniciado por Ciel

El tema es que yo ya tengo incluido el jQuery en la web que estoy haciendo, por lo tanto en este caso me sirve eso, cierto?

Entonces mejor imposible. Me voy mejor al foro de php de nuevo que aquí la idea es escachar xD...
Byeeee !!

[Panino5001]

Si ya estás usando jQuery, en efecto no hay problema.

La idea no es escachar. Lamento que pienses eso. La idea era mostrar que lo fácil no es siempre lo mejor. Que hacer más con menos (el famoso lema de jQuery) no es en realidad hacer más con menos en la mayoría de los casos, sino todo lo contrario. La idea es que pensemos por nosotros mismos en lugar de repetir ciegamente lo que dicen otros. Y eso, en todos los terrenos, no sólo en programación.

[zerokilled]

en un momento compartia la opinion de que si tu como programador decides desarrollar con una libreria, es decision tuya y no critico la forma en que decidas utilizarlo, sea para tareas sencillas o complejas. automaticamente entiendo que el individuo conoce las ventajas y las desventajas. lo que no estoy de acuerdo es cuando ese individuo recomienda el uso de libreria a una persona que da ha entender dos cosas: es principiante y va resolver como mucho 3 problemas simples. no es tanto ese detalle el que estoy en desacuerdo, sino en el desconocimiento que se deja al principiante en cuanto a las desventajas o factores que implica el uso de librerias de esa forma. y como dice panino, si ya estas empleando la libreria, entonces saquele provecho lo mas que pueda a todas las posibilidades que ofrece la libreria.

(Se me adelantó zerokilled (hola, amigo!))

saludos, señor!!

[Ciel]

Quiero aclarar sobre una cosa que dijo zerokilled, es verdad que soy principiante en el tema de Javascript, pero ojo entiendo bastante algunos conceptos mencionados aca, justamente yo mismo le pregunte si es necesario usar la libreria jQuery para algo tan simple que por lo visto se puede hacer tranquilamente sin ella... en programacion general digamos que no soy tan principiante (ni experto) por eso mas o menos entiendo las bases de ciertas cosas y que las librerias son MUY UTILES, pero no hay que abusar de ellas, dependiendo de que estemos hablando claro esta, en fin hay que tomar varios factores en cuenta y eso lo se.

Gracias por los datos aportados aca, mi ultima pregunta es.... por el momento estoy usando el codigo que postie arriba, sin el uso de jQuery... ahora agregando que ya estoy usando jQuery desde un principio, me conviene cambiar el codigo al que me paso IEKK? o simplemente dejandolo asi esta mas que bien? (de paso si dicen que lo deje asi, hay alguna correccion en el codigo para hacer? o esta perfecto?).

Gracias de antemano.

[echoTREBOR]

el que sea (recomendable js puro).

los framework son utilizados para desarrollar grandes aplicaciones en poco tiempo.

usar un framework para una tontería como esta es totalmente ineficiente e ilógico.

[Ciel]

Iniciado por echoTREBOR

el que sea (recomendable js puro).

los framework son utilizados para desarrollar grandes aplicaciones en poco tiempo.

usar un framework para una tontería como esta es totalmente ineficiente e ilógico.

Listo, la respuesta que buscaba, gracias ^^.