[XHTML]Carriage return nell'editor diventa spazio per il browser

Tadde · 09-02-2010, 23:40

Mi sono trovato di fronte a un problema inaspettato.
Questo semplice pezzo di codice:

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <script type="text/javascript">
  function checkLen(x) {
   if (x.value.length === x.maxLength)
    x.nextSibling.focus();
  }
 </script>
 </head>

<body>
<p>Salta al campo successivo quando raggiungo la maxlength di quello attuale:</p>

 <form id="myForm">
  <input size="3" maxlength="3" onkeyup="checkLen(this)" />
  <input size="2" maxlength="2" onkeyup="checkLen(this)" />
  <input size="3" maxlength="3" onkeyup="checkLen(this)" />
 </form>
</body>

</html>

non funziona come dovrebbe se viene copiato e incollato così com'è e aperto con un browser.
Il problema sta nel fatto che dopo ogni tag <input> io sono andato a capo col tasto invio, e questo carattere speciale viene considerato dal browser come uno spazio.

Quindi quando nel codice Javascript indirizzo il nextSibling dell'elemento che chiama la funzione, questo elemento indirizzato non è il seguente tag <input> come vorrei ma lo spazio tra i due.

Se provate a togliere i ritorni a capo tra i tag invece funzionerà come voluto.
Ho provato a salvare il documento con i ritorni a capo in vari formati (ANSI, UTF-8, ecc...), ma non cambia nulla.

Io alla leggibilità di un codice coi ritorni a capo al punto giusto non vorrei rinunciare, invece vorrei rinunciare alle trappole come quella in cui mi sono imbattuto stasera

.

Conoscete qualche fix o stratagemma per risolvere il problema, cioè per poter scrivere codice senza doversi preoccupare di questo comportamento dei browser (pare sia un comportamento comune a tutti o quasi i browser)?

tomminno · 10-02-2010, 08:13

http://www.w3.org/DOM/faq.html#emptytext
https://developer.mozilla.org/En/DOM/Node.nextSibling

dovresti controllare se il nodeType è 3 (testo) e in tal caso passare al nodo successivo.
Se non ricordo male ie non inserisce nel dom gli spazi vuoti mentre firefox si.

CozzaAmara · 10-02-2010, 11:19

Prova magari la cosa con i metodi del DOM di un framework come JQuery, ora non ricordo, ma è possibile che ti risolva in modo "trasparente" il problema verificando a priori di che "tipo" di nodo si tratta come indicato anche da tomminno.

Tadde · 10-02-2010, 17:25

Grazie per le risposte.

@tommino
Questo senz'altro risolverebbe nel mio specifico caso, ma non senti anche tu il bisogno di usare metodologie che si svincolino dagli if che trattano i casi specifici? Sto cercando regole per scrivere codice una volta sola senza doverlo testare su più di una piattaforma, risparmiandomi brutte sorprese e soprattutto tempo; questo renderebbe il mio lavoro molto più produttivo.
La richiesta che avevo fatto nel mio post di apertura temo dovrà rimanere insoddisfatta dato che se un editor non infilasse un simbolo per codificare il ritorno a capo, allora alla successiva riapertura del file da parte dell'editor ovviamente perderei la formattazione.
L'unica soluzione sarebbe quella di mettere codice senza alcuna formattazione in un file, e tutta l'informazione relativa alla formattazione in un altro. Ovviamente il documento finale html sarebbe solo il primo.
Una specie di file documento + file metadati relativi... forse coi prossimi filesystem ibridi tra filesystem tradizionali e DB questo sarà possibile.

Per ora mi limito a ricordarmi di usare nextSibling il meno possibile e anzi indirizzare elementi con altre strade che il DOM mi mette a disposizione.

@CozzaAmara
Sì, probabilmente tra un po' di tempo, quando avrò ritenuto sufficiente l'esperienza con JS "nudo", seguirò il tuo consiglio.

tomminno · 10-02-2010, 19:55

Quote:

Originariamente inviato da Tadde

Grazie per le risposte.

@tommino
Questo senz'altro risolverebbe nel mio specifico caso, ma non senti anche tu il bisogno di usare metodologie che si svincolino dagli if che trattano i casi specifici?

Da qualche parte quell'if lo dovrai mettere dato che non puoi modificare il dom parser fornito con il browser (e anche potendo, modificare il parser solo per evitare un brutto if mi sembra assurdo)

Quote:

Sto cercando regole per scrivere codice una volta sola senza doverlo testare su più di una piattaforma,

In ambito web? Impossibile.

Quote:

risparmiandomi brutte sorprese e soprattutto tempo; questo renderebbe il mio lavoro molto più produttivo.

Se ci fosse un unico standard (sia per l'html sia per i javascript) a cui tutti i browser aderissero strettamente e alla stessa maniera (perchè magari tutti sono aderenti allo standard ma ognuno lo è a modo suo) il tuo ragionamento avrebbe un senso, ma dato che non è così la tua mi sembra una utopia.

Quote:

La richiesta che avevo fatto nel mio post di apertura temo dovrà rimanere insoddisfatta dato che se un editor non infilasse un simbolo per codificare il ritorno a capo, allora alla successiva riapertura del file da parte dell'editor ovviamente perderei la formattazione.

Eh? Il tuo problema non è dovuto all'editor ma alle differenze tra browser. Per cui con quell'if tendi a rimuovere le differenze sia di scrittura dell'html (potrei mettere nel testo decine di a capo) sia di browser.

Quote:

L'unica soluzione sarebbe quella di mettere codice senza alcuna formattazione in un file, e tutta l'informazione relativa alla formattazione in un altro. Ovviamente il documento finale html sarebbe solo il primo.
Una specie di file documento + file metadati relativi... forse coi prossimi filesystem ibridi tra filesystem tradizionali e DB questo sarà possibile.

Tutto questo per evitare un banalissimo if?

Ciao
Tommaso

09-02-2010, 23:40	#1
Tadde Senior Member Iscritto dal: Oct 2001 Città: Firenze Messaggi: 585	[XHTML]Carriage return nell'editor diventa spazio per il browser Mi sono trovato di fronte a un problema inaspettato. Questo semplice pezzo di codice: Codice: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function checkLen(x) { if (x.value.length === x.maxLength) x.nextSibling.focus(); } </script> </head> <body> <p>Salta al campo successivo quando raggiungo la maxlength di quello attuale:</p> <form id="myForm"> <input size="3" maxlength="3" onkeyup="checkLen(this)" /> <input size="2" maxlength="2" onkeyup="checkLen(this)" /> <input size="3" maxlength="3" onkeyup="checkLen(this)" /> </form> </body> </html> non funziona come dovrebbe se viene copiato e incollato così com'è e aperto con un browser. Il problema sta nel fatto che dopo ogni tag <input> io sono andato a capo col tasto invio, e questo carattere speciale viene considerato dal browser come uno spazio. Quindi quando nel codice Javascript indirizzo il nextSibling dell'elemento che chiama la funzione, questo elemento indirizzato non è il seguente tag <input> come vorrei ma lo spazio tra i due. Se provate a togliere i ritorni a capo tra i tag invece funzionerà come voluto. Ho provato a salvare il documento con i ritorni a capo in vari formati (ANSI, UTF-8, ecc...), ma non cambia nulla. Io alla leggibilità di un codice coi ritorni a capo al punto giusto non vorrei rinunciare, invece vorrei rinunciare alle trappole come quella in cui mi sono imbattuto stasera . Conoscete qualche fix o stratagemma per risolvere il problema, cioè per poter scrivere codice senza doversi preoccupare di questo comportamento dei browser (pare sia un comportamento comune a tutti o quasi i browser)? __________________ http://www.gnu.org/philosophy/no-wor...hments.it.html http://gprime.net/flash/postingandyou.php [1510 kB]

10-02-2010, 11:19	#3
CozzaAmara Senior Member Iscritto dal: Nov 2008 Messaggi: 411	Prova magari la cosa con i metodi del DOM di un framework come JQuery, ora non ricordo, ma è possibile che ti risolva in modo "trasparente" il problema verificando a priori di che "tipo" di nodo si tratta come indicato anche da tomminno. __________________

10-02-2010, 17:25	#4
Tadde Senior Member Iscritto dal: Oct 2001 Città: Firenze Messaggi: 585	Grazie per le risposte. @tommino Questo senz'altro risolverebbe nel mio specifico caso, ma non senti anche tu il bisogno di usare metodologie che si svincolino dagli if che trattano i casi specifici? Sto cercando regole per scrivere codice una volta sola senza doverlo testare su più di una piattaforma, risparmiandomi brutte sorprese e soprattutto tempo; questo renderebbe il mio lavoro molto più produttivo. La richiesta che avevo fatto nel mio post di apertura temo dovrà rimanere insoddisfatta dato che se un editor non infilasse un simbolo per codificare il ritorno a capo, allora alla successiva riapertura del file da parte dell'editor ovviamente perderei la formattazione. L'unica soluzione sarebbe quella di mettere codice senza alcuna formattazione in un file, e tutta l'informazione relativa alla formattazione in un altro. Ovviamente il documento finale html sarebbe solo il primo. Una specie di file documento + file metadati relativi... forse coi prossimi filesystem ibridi tra filesystem tradizionali e DB questo sarà possibile. Per ora mi limito a ricordarmi di usare nextSibling il meno possibile e anzi indirizzare elementi con altre strade che il DOM mi mette a disposizione. @CozzaAmara Sì, probabilmente tra un po' di tempo, quando avrò ritenuto sufficiente l'esperienza con JS "nudo", seguirò il tuo consiglio. __________________ http://www.gnu.org/philosophy/no-wor...hments.it.html http://gprime.net/flash/postingandyou.php [1510 kB]

10-02-2010, 08:13	#2
tomminno Senior Member Iscritto dal: Oct 2005 Messaggi: 3306	http://www.w3.org/DOM/faq.html#emptytext https://developer.mozilla.org/En/DOM/Node.nextSibling dovresti controllare se il nodeType è 3 (testo) e in tal caso passare al nodo successivo. Se non ricordo male ie non inserisce nel dom gli spazi vuoti mentre firefox si.

Strumenti
Mostra una versione stampabile Invia questa pagina per email