[RISOLTO][javascript] verificare se un oggetto e' a fuoco

[lzzluca]

Ciao a tutti!
Sperando di non fare una domanda stupida, mi chiedevo se c'e' il modo di capire quando un oggetto e' a fuoco, una sorta di:
obj.testHasFocus() .
Vorrei infatti capire quale oggetto e' selezionato, di una finestra, nel modo piu' "pulito" possibile.
Grazie,
Luca

[Zoff]

Beh puoi sfruttare gli eventi onfocus (l'elemento ottiene il focus) e onblur (l'elemento perde il focus)...

[lzzluca]

Beh puoi sfruttare gli eventi onfocus (l'elemento ottiene il focus) e onblur (l'elemento perde il focus)...

Ti ringrazio per la risposta ma resto poco convinto: nel modo che mi suggerisci, infatti, dovrei utilizzare un flag, impostato a true, quando un oggetto ha il fuoco, e a false quando non ce l'ha, per ogni oggetto della finestra.
Mi chiedevo se c'e' un modo che non mi obbliga ad intervenire su ogni oggetto.
Luca

[Zoff]

Beh puoi sfruttare gli eventi onfocus (l'elemento ottiene il focus) e onblur (l'elemento perde il focus)...

Ti ringrazio per la risposta ma resto poco convinto: nel modo che mi suggerisci, infatti, dovrei utilizzare un flag, impostato a true, quando un oggetto ha il fuoco, e a false quando non ce l'ha, per ogni oggetto della finestra.
Mi chiedevo se c'e' un modo che non mi obbliga ad intervenire su ogni oggetto.
Luca

Per curiosità, cosa devi fare?
Il mio consiglio non era di usare un flag ma di inserire il codice che metteresti dentro l'if(elem.hasFocus()) come funzione di gestione dell'evento on focus...

[lzzluca]

Per curiosità, cosa devi fare?
Il mio consiglio non era di usare un flag ma di inserire il codice che metteresti dentro l'if(elem.hasFocus()) come funzione di gestione dell'evento on focus...

Vorrei sapere quanto tempo passa l'utente su una pagina; il problema che ho incontrato e' questo: se l'utente clicca su un elemento della pagina (un div ad esempio), il focus non e' piu' sulla pagina, ma sull'elemento.
Devo ammettere che questo mi ha un po' spiazzato e sto cercando "di inventarmi qualcosa".
Luca

[Zoff]

Ma come fai a controllar eil tempo trascorso nella pagina?

Io farei così:

Codice: Seleziona tutto

     


...

Codice: Seleziona tutto

var timer = 1;

function startTimer(){
     window.setInterval( "incTimer()", 100 );
}

function incTimer(){
     timer += 1;
}

function exit(){
    alert( "Hai passato nella pagina "+(timer/10)+"secondi!" );
}

[lzzluca]

Ma come fai a controllar eil tempo trascorso nella pagina?

Io farei così:

Codice: Seleziona tutto

     


...

Codice: Seleziona tutto

var timer = 1;

function startTimer(){
     window.setInterval( "incTimer()", 100 );
}

function incTimer(){
     timer += 1;
}

function exit(){
    alert( "Hai passato nella pagina "+(timer/10)+"secondi!" );
}

A dire la verita' mi sarebbe piaciuto ottenere un risultato piu' preciso, ovvero: mi capita molte volte di aprire pagine, che restano aperte tutto il giorno, ma che guardo solo 10 minuti.
Di tutto il tempo che quelle pagine restano aperte, inattive, vorrei conteggiare solo i 10 minuti in cui l'utente le visualizza, per questo pensavo all'evento focus.
L'idea era di valorizzare una proprieta' hasFocus, per ogni figlio della window, a true quando l'oggetto e' a fuoco, a false altrimenti.
Mi sto accorgendo che e' abbastanza "sporca" come cosa, quindi sto pensando di tenere il timer ben piu' pulito (e ben funzionante) che hai postato.
Comunque non mi arrendo prima di aver fatto un po' di prove e se riesco nel mio intento, non manchero' di postare.
Luca

[Zoff]

Allora oltre a quelli potresti fermare il setInterval quando c'è un window.onblur e riattivarlo con window.onfocus

[lzzluca]

Allora oltre a quelli potresti fermare il setInterval quando c'è un window.onblur e riattivarlo con window.onfocus

Stiamo quasi chattando 
Il problema e' quando l' utente seleziona un oggetto della pagina: la pagina perde il fuoco, che va' all'oggetto selezionato (che appartiene alla pagina, ripeto). Quindi l'utente sta lavorando sulla pagina, per quel che mi riguarda, mentre per il browser sta lavorando su un oggetto della pagina (il timer sarebbe quindi fermo)...
Spero di aver spiegato bene la dinamica del problema, ogni consiglio e' ben accetto!

[Zoff]

Ah ora ho capito...
La butto lì...
Prova (se non ti compromette il comportamento della pagina) a mettere come evento onblur di window window.focus();

Codice: Seleziona tutto

window.onblur = function(){window.focus()};

[lzzluca]

Ah ora ho capito...
La butto lì...
Prova (se non ti compromette il comportamento della pagina) a mettere come evento onblur di window window.focus();

Codice: Seleziona tutto

window.onblur = function(){window.focus()};

Non ho ancora provato questa soluzione, ma cosi' a naso mi sembra che, anche cliccando un oggetto che non appartiene alla finestra, la finestra voglia recuperare il fuoco... Mi sembra una soluzione tutt'altro che "pulita", mi hai abituato molto meglio 
Comunque appena combino qualcosa di buono posto!
Luca

[lzzluca]

Scusate il doppio post, ma ho un aggiornamento che non c'entra con quello che ho scritto nel post sopra.
Ho scritto del codice che dovrebbe stampare a video un "ciao", quando un oggetto che fa parte della finestra prende il focus.
In linea di massima ho ragionato cosi: ad ogni oggetto della window do una proprieta' hasFocus, che vale true quando l'oggetto ha il focus. La window non avra' il fucus quando tutti questi campi varrano false (ancora non inserito).
Purtroppo su IE non funziona molto bene, e su FF da' un errore che non capisco; se qualcuno sa aiutarmi lo ringrazio infinitamente.
Posto il codice:
(mysource.js)

Codice: Seleziona tutto

window.addEventListener("load", init(), false);

function init(){
  // Add focus/blur events to all window objects
  var pBody = window.document.body; 
  var i = 1;
  var parent;
  debugger;
  while(pBody.childNodes[i]){ // adds events on parent
    parent = pBody.childNodes[i];
    this.addEvents(parent);
    this.addEventToChilds(parent.childNodes[1]); // adds events on childs
    i++; // next
    //alert(pBody.childNodes[i].id); // c'e' un alert di troppo, vuoto??
  }

}

  // Invert focus flag
  function setFocus(){
    if(this.hasFocus) // check is defined
      this.hasFocus = false;
    else
      this.hasFocus = true;
    alert('invert');
  }
  
  // Add some events to obj
  function addEvents(obj){
    var evtsList = new Array();
    evtsList[0] = "focus";
    evtsList[1] = "blur";
    fnc = "setFocus";
    for(var j = 0; j < evtsList.length; j++)
      eval("obj.on"+evtsList[j]+"="+fnc);
  }
  
  // Add events to all obj childs
  function addEventToChilds(obj){
    while(obj){
      this.addEvents(obj);
      obj=obj.childNodes[1]; // next child
    }
  }

(prova.html)

Codice: Seleziona tutto

<HTML id="html">
	<HEAD>
  	  <TITLE>haloooo</TITLE>
	</HEAD>
	<BODY id="body">
		<DIV id="div1" style="height: 100px;width: 100px;background-color: red;"></DIV>
		<DIV id="div2" style="height: 100px;width: 100px;background-color: green;"></DIV>
		<DIV id="div3" style="height: 100px;width: 100px;background-color: blue;"></DIV>
	 </BODY>
   <script type="text/javascript" src="mysource.js"></script>
</HTML>

Luca

[Zoff]

non dovresti passargli solo il riferimento alla funzione e non chiamare la funzione stessa?
Vale a dire, non dovrebbe essere così?

Codice: Seleziona tutto

window.addEventListener("load", init, false);

Inoltre IE non ha quel metodo per cui dovrai fare:

Codice: Seleziona tutto

if(window.addEventListener){
     window.addEventListener("load", init, false);
}else{
     window.attachEvent("load", init);
}

[lzzluca]

Credo di avercela fatta, quindi posto il risultato.
Non ho verificato la precisione del tutto, ma mi sembra che ci siamo e voglio andarmi a nanna. 

(mysource.js)

Codice: Seleziona tutto

//***************************************** Calcola il numero di secondi che l'utente passa nella pagina *******************************************



window.onload = init;

window.onunload = exit;

var fnc = setFocus;

var listenedObjs = new Array();

var timer = 1;



function init(){

    slideObjs(document);

    window.setInterval( "incTimer()", 100 ); // controllo il focus nella pagina ogni secondo

}



// Visita tutti i nodi dell'albero DOM

function slideObjs(obj){

    var valid;

    var childs = obj.childNodes; // array dei figli di obj

    valid = testTag(obj); // filtro sul tipo di tag

    if(valid){

        obj.onfocus = fnc;

        obj.onblur = fnc;

        listenedObjs[listenedObjs.length] = obj;

    }

    for(var i = 0; i < childs.length; i++)

        slideObjs(childs[i]);

}



// Validazione tag: ritorna 1 se il tag e' presentein listValidTag, 0 altrimenti

function testTag(obj){

    listValidTag = new Array();

    listValidTag[0] = "textarea";

    for(var i = 0; i < listValidTag.length; i++)

        if(obj.type == listValidTag[i].toLowerCase())

            return 1; // valido

    return 0; // non valido

}



// Inverte il flag focus

function setFocus(){

    if(!this.hasFocus) // hasFocus non definito

        this.hasFocus = true;

    else

        this.hasFocus = !(this.hasFocus);

}



// Ritorna 1 se un oggetto della pagina ha il fuoco, zero altrimenti

function focusOnPage(){

    for(var i = 0; i < listenedObjs.length; i++)

        if(listenedObjs[i].hasFocus == true)

            return 1; // un oggetto della page ha il focus

    return 0;

}



// Se il focus e' nella window, viene incrementato ogni secondo il timer di 1

function incTimer(){

    var focus =  focusOnPage();

    if(focus)

        timer += 1;

}



// Stampa il numero di secondi passati nella pagina

function exit(){

    alert( "Hai passato nella pagina "+(timer/10)+"secondi" );

}

(prova.html)

Codice: Seleziona tutto

<HTML id="html">

    <HEAD>

        <script src="mysource.js"></script>

        <TITLE>prova</TITLE>

    </HEAD>

	<BODY id="body">

        <form>

            <div>

                <textarea id="text1" cols="20" rows="1">text1</textarea>

            </div>

            <div>

                <textarea id="text2" cols="20" rows="1">text2</textarea>

            </div>

            <div> 

                <textarea id="text3" cols="20" rows="1">text3</textarea>

            </div>

            <div> 

                <textarea id="text4" cols="20" rows="1">text4</textarea>

            <div> 

        </form>

    </BODY>

</HTML>

Di nuovo grazie dell'aiuto!
Luca