Automatizar las frases por defecto en los campos de texto
Imagino que más de alguna vez habrán visto los típicos campos de texto con alguna frase como “ingresa tu email aquí” y que cuando le hacen click esa frase desaparece por completo dejando el input vacío. Y lógicamente que cuando me salgo de boton vuelve la frase original.
Acá les dejo una forma automática de hacerlo, en javascript, por supuesto:
var inputs=$$('#formulario_de_contacto .text','#formulario_de_contacto textarea');
for(i=0;i<inputs.length;i++){
inputs[i].txtOriginal=inputs[i].value;
inputs[i].onfocus=function(){
if(this.value==this.txtOriginal){ this.value=""; }
}
inputs[i].onblur=function(){
if(this.value==""){ this.value=this.txtOriginal; }
}
}
No hay mucho que explicar de este código: primero selecciona todos los textarea y elementos con la clase “text” (que es la que yo uso para diferenciar los inputs type=”text” de los otros inputs) y luego a cada uno de esos elementos les lee el value original y lo guarda en una variable txtOriginal, para luego decirle que cuando se ponga el cursor sobre ellos revise si tienen el mismo texto que el original o si está vacío para hacer la acción correspondiente.
El código anterior utiliza mootools para optimizar la búsqueda de los inputs de texto y los textarea dentro del código. Si no saben como se utiliza mootools, vean este tutorial.
muy util!
crossbrowser y pa que versión de mootols??
para que quede filetón, podrías agregarle al onfocus y onblur que cambien la clase del input/textarea para que darle un look de “estoy seleccionado”
Fácil!… dentro del onfocus=function(){
//simplemente tendrías que agregar esta línea
this.addClass(“activo”);
}
y dentro del onblur=function(){
//temdrías que agregar esta otra
this.removeClass(“activo”);
}
Y por supuesto tendrías que definir en los CSS que los .text.activo y los textarea.activo tengan las propiedades que quieras.
Esta función sirve para cualquier versión de mootools porque la única función que usa es la $$ para seleccionar múltiples objetos según su className, y esa es una de las funciones más básicas de mootools.
estuve leyendo varios de tus posts .. tan wenos!
una sugerencia si.. en posts como estos podrias poner un ejemplo para motivar