Topic: Jscript onchange e tasti freccia

[danielet]

In questa pagina

http://www.martinlescarpe.altervista.org/se33ssf.htm

con IE premendo la freccia giù si ottiene un refresh immediato delle immagini mentre
con Mozilla occorre premere freccia giù e invio per avere lo stesso effetto.

Temo che sia un problema legato al codice jscript
e in particolare alla funzione mostraimmagine() richiamata con onchange
ma non trovo una soluzione
che possa essere utilizzata con successo da entrambi i browser.

Ringraziando dell'ospitalità e dell'eventuale aiuto
Daniele

[lucasali]

io non ho riscontrato differenze, verifica di non aver disabilitato qualcosa dal menu strumenti - opzioni - proprietà web - java script - avanzate

ciao. Luca

[danielet]

Grazie della risposta Luca.
Ho verificato le opzioni che mi indichi ma non trovo niente di anormale.

Ho fatto prove con
Linux Fedora 2 con  Mozilla/5 v.1.6  e
Windows XP con FireFox v.1.0.6
Il comportamento è identico cioè alla pressione della freccia in giù non avviene il refresh dell'immagine corrispondente cosa che avviene con IE.

Ti chiedo di indicarmi quale versione usi di Mozilla o Firefox.
Ciao Daniele

[prometeo]

Confermo il comportamento visto da Daniele con SM 1.1a-trunk.
Ciao, Giacomo.

[the fly on the net]

Non ho scorso appronditamente il codice, ma credo che Daniele abbia ragione. Inutile dire che secondo le raccomandazioni W3C ha ragione Firefox

The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA.

Venendo al tuo problema, credo che si possa risolvere intercettando l'evento onkeypress nella select.

Codice: [Seleziona]

<select onkeypress="Handler( )">...

In questo evento puoi chiamare window.focus ( ) e poi this.focus( ) - questo dovrebbe causare una impercettibile perdita del focus della select e quindi l'evento onchange

[lucasali]

non avevo capito io cosa intendevi, io premevo "la freccia giù" dell'elenco con il mouse e selazionavo un prodotto diverso...
non avevo capito che "la freccia giù" è quella nella tastiera

ciao. Luca

[danielet]

Aggiungendo
onkeypress="mostraimmagine()" oltre a onchange="mostraimmagine()"

l'effetto è che IE continua a lavorare bene mentre FF ritarda di una immagine.

Ovvero con FF alla prima pressione della freccia giù l'mmagine non cambia (mostraimmagine() scatta a seguito dell'evento onkeypress ma passa il valore,e quindi l'immagine, della riga di partenza -la prima appunto- non di quella di arrivo )  mentre alla seconda pressione  si ottiene la seconda immagine e così via sempre con il ritardo di una immagine.

L'utilizzo di window.focus() non apporta alcun miglioramento (forse non lo uso correttamente) anche se effettivamente il cambio di finestra corrente o la semplice pressione del tasto sinistro in altra zona della finestra scaterebbe il cambio di immagine.

Non so "che pesce pigliare".
Ciao Daniele.

[danielet]

Mi dispiace anche che nei "corsi" online di Jscript non si sottolinei che con Mozilla e Netscape il problema esiste.

vedi l'esempio qui

 http://www.html.it/javascript/corso/js_15.htm

che al solito non va con FF

Daniele

[the fly on the net]

Precisiamo: JScript è la versione Microsoft di JavaScript (creato da Netscape). Sebbene molto simili come linguaggio, non sono la stessa cosa. Quindi qui si parla di JavaScript

Precisato questo, non ti ho detto di far eseguire la stessa funzione all'evento onchange e onkeypress, ma di togliere e rimettere il focus alla select tramite onkeypress.
Questo dovrebbe bastare per invocare onchange ogni volta che si preme un tasto

[danielet]

Innanzitutto grazie della risposta.

Precisazione giusta. Ho sbagliato a scrivere Jscript.
Il corso indicato comunque è di javascript (creato da Netscape) ma l'esempio che fanno non funziona con Netscape (a meno che non lo si configuri con Rendering engine as Internet Explorer disponibile solo dalla 8 e non ancora per Linux).

Tornando al tentativo di soluzione che ho messo qui

http://www.martinlescarpe.altervista.org/ca33ssf.htm

con questa sintassi

onkeypress='document.galleria.elenco.blur();document.galleria.elenco.focus()' onChange='mostraimmagine()'

quello che mi suggerivi se ho ben capito, lo sfarfallio avviene ma onchange non scatta.
O meglio scatta dalla terza riga nella lista visualizzando l'immagine relativa all'elemento precedente nella lista.

Semplificando al massimo il codice e applicando il problema solo alla textarea ( che dovrebbe cambiare in base alla lista in SELECT) questo è il codice che si può provare a verificare. Funziona con IE e non con FF.

Codice: [Seleziona]

<HTML>
<HEAD>
<link rel=stylesheet href='x5-style.css' type='text/css'>

<script language='javascript'>
function mostraimmagine()
{
document.galleria.testo.value = document.galleria.elenco.options[document.galleria.elenco.selectedIndex].value
}
</script>
</HEAD>

<BODY>
<FORM name='galleria'>
<SELECT name='elenco' size='1' onkeypress='document.galleria.elenco.blur();document.galleria.elenco.focus()' onChange='mostraimmagine()' >
<option selected value='primo'>11111</option>
<option value='secondo'>22222</option>
<option value='terzo  '>33333</option>
<option value='quarto '>44444</option>
<option value='quinto '>55555</option>
</SELECT>
<BR>
<textarea class='magazzino' WRAP rows=4 cols=30 name='testo' onFocus='document.galleria.elenco.focus()' >iniziale</textarea></td>
</FORM>

<script language='javascript'> document.galleria.elenco.focus() </script>

</BODY></HTML>
Ciao Daniele

Codice: [Seleziona]

[klades]

Quest'ultimo codice che hai postato a me funziona in modo identico su Firefox e su IE. cambiando la selezione si modifica il testo nella textarea.
Cosa mi sfugge?

Netscape (a meno che non lo si configuri con Rendering engine as Internet Explorer  disponibile solo dalla 8 e non ancora per Linux).

Non esisterà mai per Linux, semplicemente perché non può esistere una versione di Ie per Linux.
Ciao, Paolo

[danielet]

Se stai attento con FF il comportamento è diverso.
Alla prima pressione del tasto di tastiera FRECCIA GIU' l'elemento della lista diventa 22222 mentre nel box di testo rimane iniziale (mentre dovrebbe esserci secondo) . Se premi un'altra volta diventa 33333 e nel box di testo secondo (mentre dovrebbe esserci terzo) e così via. Rimane incoerenza tra quanto visualizzato nella lista e quanto visualizzato nel box di testo. A meno che dopo aver premuto il tasto freccia premi anche INVIO.

Ciao Daniele

[the fly on the net]

L'evento onkeypress avviene prima che la select cambi di valore (questo perché puoi annullare l'evento).

Prova questo:

Codice: [Seleziona]

<SELECT name="elenco" size="1'" onkeypress="setTimeout('document.galleria.elenco.blur();document.galleria.elenco.focus()',500); return true">

Questo crea un timeout di 500ms (mezzo secondo), teoricamente più che sufficienti per fare in modo che il blur/focus venga chiamato a select modificata.

[klades]

@flyonthenet: il tuo metodo funziona, l'ho provato ora, basta anche un timeout più corto, anche 100.

Una curiosità: io ho provato questo codice e sembra funzionare:

Codice: [Seleziona]


<HTML>
<HEAD>
<link rel=stylesheet href='x5-style.css' type='text/css'>

<script language='javascript'>
function mostraimmagine()
{
document.galleria.testo.value = document.galleria.elenco.options[document.galleria.elenco.selectedIndex].value;
}

</script>
</HEAD>

<BODY>
<FORM name='galleria' onkeypress='document.galleria.elenco.blur();document.galleria.elenco.focus()'>
<SELECT name='elenco' size='1'  onChange='mostraimmagine()'>
<option selected value='primo'>11111</option>
<option value='secondo'>22222</option>
<option value='terzo  '>33333</option>
<option value='quarto '>44444</option>
<option value='quinto '>55555</option>
</SELECT>
<BR>
<textarea class='magazzino' WRAP rows=4 cols=30 name='testo' onFocus='document.galleria.elenco.focus()' >iniziale</textarea></td>
</FORM>

<script language='javascript'> document.galleria.elenco.focus() </script>

</BODY></HTML>


Secondo te è scorretto? Tanto per imparare qualcosa di nuovo ...
Ciao, Paolo

[danielet]

Grazie a tutti. Funziona sia nella versione indicata sopra che in quella indicata sotto e che riporto per completezza.

Provate su XP con IE e FF,su Linux con Mozilla e su Pocket PC windows 2003.

Codice: [Seleziona]

<HTML>
<HEAD>
<link rel=stylesheet href='x5-style.css' type='text/css'>

<script language='javascript'>
function mostraimmagine()
{
document.galleria.testo.value = document.galleria.elenco.options[document.galleria.elenco.selectedIndex].value
}
</script>
</HEAD>

<BODY>
<FORM name='galleria'>
<SELECT name="elenco" size="1" onkeypress="setTimeout('document.galleria.elenco.blur();document.galleria.elenco.focus()',100); return true" onChange='mostraimmagine()'>
<option selected value='primo'>11111</option>
<option value='secondo'>22222</option>
<option value='terzo  '>33333</option>
<option value='quarto '>44444</option>
<option value='quinto '>55555</option>
</SELECT>
<BR>
<textarea class='magazzino' WRAP rows=4 cols=30 name='testo' onFocus='document.galleria.elenco.focus()' >iniziale</textarea></td>
</FORM>

<script language='javascript'> document.galleria.elenco.focus() </script>

</BODY></HTML>



Ciao Daniele