Forums : Xul, Xbl, JS...

soit :

<textbox id="tb_titre" width="300" onfocus="fa_prisefocus('tb_titre');" onblur="fa_pertefocus('tb_titre');"/>

et

function fa_pertefocus(vv_qui)
{
   var elem;
   try {
   elem=document.getElementById(vv_qui);
   elem.inputField.style.backgroundColor='white';
   } catch (e) {
		// raf
	}
}

et

function fa_prisefocus(vv_qui)
{
   var elem;
   try {
   elem=document.getElementById(vv_qui);
   elem.inputField.style.backgroundColor='#80FF80';
	} catch (e) {
		//alert('Impossible d\'identifier l\'élément'+vv_qui);
	}
}

moi ca marche pour changer la couleur de la zone de texte client mais attention aux skins et si en passant, quelqu'un sait comment ne plus être obligé de mettre le nom de l'élément en "dur", je suis preneur

Alors pout ton id en dur, je pense que tu dois pouvoir remplacer ton code de cette manière ca devrait fonctionner :

<textbox id="tb_titre" width="300" onfocus="fa_prisefocus(this);" onblur="fa_pertefocus(this);"/>

function fa_pertefocus(tb)
{
    try {
        tb.inputField.style.backgroundColor='white';
    } catch (e) {
        // raf
    }
}

function fa_prisefocus(tb)
{
    try {
        tb.inputField.style.backgroundColor='#80FF80';
    } catch (e) {
        //alert('Impossible d\'identifier l\'élément'+vv_qui);
    }
}

En plus ca sera plus rapide, parce que si ton document est gros le getElementById mine de rien ca doit bouffer pas mal de temps pour le parcour.

Sinon, comme tu dis, attention aux styles... J'ai toujours une bande blanche tout autour de la zone que je change de couleur, et rien n'y fait. En regardant dans le fichier de style chrome://global/skin/textbox.css j'ai remarquer qu'il y avait un padding de 2 à 3 px pour la boite qui contient le html:input, donc voila mon problème de couleur viens de la. En tout cas merci quand meme.

comment ne plus être obligé de mettre le nom de l'élément en "dur"

Remplace l'ID par this et/ou event

<textbox onfocus="fa_prisefocus(this, event);"/>

function fa_prisefocus(o, e)
    {
    //var elem = document.getElementById(vv_qui);
    // devient:
    o.inputField.style...
    // ou:
    e.target.inputField.style...
    }

Il y a aussi e.currentTarget et e.originalTarget à expérimenter

Fabrice

Bonsoir, et merci pour la tentative. J'avais déjà exploré cela mais sans plus de succès que maintenant !! Je n'arrive pas à exploiter le "this" sur ces 2 évènements.

Ok, j'ai compris d'ou venait ton erreur, dans les évènements sur la textbox, this ne fait pas référence à la textbox mais directement à la balise html input qu'elle contient.

Le système est trompeur car on positionne les gestionnaires d'évènements sur la textbox, mais derrière c'est fait comme suit (de manière simplifiée) :

<binding id='textbox'>
    <content>
        <xul:box>
            <html:input xbl:inherits="onblur,onfocus...."/>
        </xul:box>
    </content>
</binding>

Du coup les évènements sont propagés sur l'input et pas sur la textbox.

Il faut juste supprimer le .inputField. et ca marchera (j'ai testé)

function fa_prisefocus(o, e)
    {
    o.style...
    }

Bonsoir, et merci beaucoup. Cela fonctionne en effet très bien :

<textbox id="tb_titre" width="300" onfocus="fax_prisefocus(this);" onblur="fax_pertefocus(this);"/>

et les deux fonctions, sans nécessité d'évènement :

function fax_pertefocus(vv_qui)
{
   try {
   vv_qui.style.backgroundColor='white';
   } catch (e) {
		// raf
	}
}

et

function fax_prisefocus(vv_qui)
{
   try {
   vv_qui.style.backgroundColor='#80FF80';
	} catch (e) {
		//raf
	}
}

Merci encore, voila qui améliore grandement le code.