como ejecutar función dentro de focus

[abigor66]

Buenas tardes foreros, estoy tratando de pasarme a html5 pero debo tener en cuenta a los navegadores que no lo soportan. estoy empezando con el input del buscador y la etiqueta placeholder

actualmente su funcionamiento lo emulo con onBlur y onFocus en la etiqueta input y una funcón javascript, el problema es que al parecer onBlur genera conflictos con chrome y placeholder ya que me arroja undefined. en fin...

mi solución es poder ejecutar una función dentro de el método focus de javascript

Código Javascript:

var txt = "Buscar...";
    var d = document.buscador.q;
    d.value = txt;                
    
    d.focus(
        function () {
            if (d.value == txt) {
                d.value = "";
            }
        }
    );
 

el problema es que la función que está dentro de focus no la ejecuta, alguien sabe porque? me podrían recomendar alguna solución que no lleve onFocus y onBlur en la etiqueta input.

muchas gracias y espero me puedan ayudar.

[InKarC]

Es colocando esto en la etiqueta

Código HTML:

onFocus="clearText(this)" onBlur="clearText(this)" value="busqueda aqui..."
 

Y este javascript:

Código Javascript:

function clearText(field){
   if (field.defaultValue == field.value){ field.value = ''}
     else if (field.value == '') {field.value = field.defaultValue};
}
 

Y eso es todo...

PD: decir "espero me puedan ayudar" es algo absolutamente innecesario; ya de por si cualquiera que este viendo foros de problemas ajenos no respondidos lo hace con el unico fin de resolver la inquietud de serle posible.

[abigor66]

Gracias InKarC pero la idea, precisamente es no utilizar onBlur y onFocus en la etiqueta input.

[InKarC]

la idea? vuestra idea? si busca una solución a un problema y limita las herramientas que puede usar para solucionarlo se esta perjudicando a si mismo.

Chrome y demas navegadores seguiran soportando onfocus y onblur por muchos años mas, pero igualmente por muchos de esos años hay gente que seguirá usando IE8 entre otros navegadores antiguos que no soportan placeholder ni nada html5.

[InKarC]

Aqui esta la solución en el supuesto caso en el que no se pudieran colocar etiquetas al input

Código Javascript:

if(!document.createElement('canvas').getContext){ // Solo aplica para navegadores no-html5
    var nombre = document.getElementsByName("nombre")[0]
    var mensaje = nombre.getAttribute("placeholder");
    nombre.value = mensaje;
    
    if (nombre.addEventListener){
      nombre.addEventListener('focus', clearText, false); 
      nombre.addEventListener('blur', clearText, false); 
    } else if (nombre.attachEvent){
      nombre.attachEvent('onfocus', clearText);
      nombre.attachEvent('onblur', clearText);
    }
    
    function clearText(field){
    if (mensaje == nombre.value){ nombre.value = ''}
    else if (nombre.value == '') {nombre.value = mensaje};
    }
}
 

[Bam_Margera]

yo lo haría con JQuery

Código:

$('selector').bind('focus',function( {
    //funcion aqui. Do more, write less ;)
  });

[abigor66]

Hola InKarC, creo que te estas alterando por nada. te comento:
1 - escribir "espero me puedan ayudar" es un formalismo que denota amabilidad, es cierto que muchos de los que leen post ajenos tienen la intención de ayudar, sin embargo, no es su prioridad y mucho menos su obligación, por lo que es de respetar el tiempo que dediquen a leer mi consulta.
2 - aunque html5 no sea soportado por todos los navegadores actualmente, si lo será en un futuro y mientras tanto quiero ofrecerle a mis vistas la mejor experiencia posible y reducirme el consumo de recursos. (si ya tengo que programar doble para IE y toda sus versiones, que más da hacerlo para html5)
3 - si es mi idea, debido a que yo soy el del problema, sin embargo, no creo que deba sacrificar funcionalidad por comodidad.

agradezco tu ayuda, aunque creo que está pasado de código.

Bam_Margera precisamente había visto un ejemplo en jquery y eso fue lo que me confundió. la solución:

Código Javascript:

var txt = "Buscar...";
var d = document.buscador.q;    
d.value = txt;
d.onfocus = function () {
    if (d.value == txt) {d.value = "";}
}
d.onblur = function () {
    if (d.value == "") {d.value = txt;}
}
 

gracias nuevamente.