maiuscolo/minuscolo senza ricaricare la pagina php

[a.forte]

Salve a tutti,
avrei bisogno di una mano per costruire una funzione abbastanza semplice, ma , conoscendo veramente poco di javascript, non so come muovermi.

Il risultato sarà una tastiera che converte i caratteri da maiuscoli a minuscoli e viceversa. Vi spiego come dovrebbe essere:

<script>
function Cambia(f){
  if(f=='min'){
   var v='Maius';
  }
  else{
   var v='min';
  }
}
</script>

<?
$matrice_caratteri[min][0]="a";
$matrice_caratteri[min][1]="b";
$matrice_caratteri[Maius][0]="A";
$matrice_caratteri[Maius][1]="B";
$c="min";//default
for($i=0;$i<=1;$i++){
	echo "<button>$matrice_caratteri[$c][$i]</button>";
}
echo "<button onclick=\"Cambia('$c')\">CAMBIA</button>";
?>

più o meno così, poi io ci butto dentro il database, ma posso precaricare le lettere nell'array, a meno che non sia meglio fare, ai fini della funzione, in modo diverso. Quello che più mi interessa è cambiare $c senza ricaricare la pagina. Dunque la funzione "Cambia" javascript.

Avete qualche idea?
Vi ringrazio anticipatamente.
Angelo

[NonCeLaFaccio+]

Credo che sarebbe più semplice farlo con i css, basta creare una classe con text-transform: uppercase e una con text-transform: lowercase e poi assegnarle via javascript.

Questo è tratto dal manuale di CSS 2.1

16.5 Capitalization: the ’text-transform’ property
’text-transform’
Value: capitalize | uppercase | lowercase | none | inherit
Initial: none
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified
This property controls capitalization effects of an element’s text. Values have the
following meanings:
capitalize
Puts the first character of each word in uppercase; other characters are unaffected.
uppercase
Puts all characters of each word in uppercase.
lowercase
Puts all characters of each word in lowercase.
none
No capitalization effects.
The actual transformation in each case is written language dependent. See RFC
3066 ([RFC3066]) for ways to find the language of an element.
Conforming user agents [p. 37] may consider the value of ’text-transform’ to be
’none’ for writing scripts for which there is no transform.
Example(s):
In this example, all text in an H1 element is transformed to uppercase text.
h1 { text-transform: uppercase }

[a.forte]

Beh diciamo che non ho ben capito ma di getto mi viene da chiedere poi il valore del bottone cambia? Perchè la tastiera dovrà in effetti scrivere a o A a seconda della modalità.

[a.forte]

In ogni modo:
<style type="text/css">

h1 { text-transform: uppercase }
h2 { text-transform: lowercase }

</style>
<?
$arr[0]="a";
$arr[1]="b";
for($i=0;$i<=1;$i++){
if($f=='m'){
echo "<h1><input type=\"button\" name=\"car\" value=\"".$arr[$i]."\"></h1>";
}
else{
echo "<h2><input type=\"button\" name=\"car\" value=\"".$arr[$i]."\"></h2>";
}
}
echo "<button onclick=\"Cambia('$f')\">CAMBIA</button>";
?>

però la parte significativa è il cambio senza ricaricare la pagina....kmq non funziona ancora

[NonCeLaFaccio+]

Fammi capire un po' meglio perché mi sfugge qualcosa.

Tu vuoi visualizzare una tastiera fatta con tanti button ognuno dei quali corrisponde ad una lettera e un pulsante aggiuntivo che cambia tutte le lettere da maiuscole a minuscole e viceversa. E tutto questo senza passare per il server ovviamente.

E fin qui mi sembra chiaro.

Quello che mi sfugge è cosa deve succedere poi.

Immagino che quando l'utente clicca sui vari bottoni le lettere verranno .... cosa ?

Scritte in una div e poi inviate tutte assieme al server ? O che altro?

E che c'entra il db?

[a.forte]

Quando l'utente clicca su un bottone la lettera viene scritta in un iframe, ma questo già è implementato e soprattutto è il motivo per cui non voglio che si ricarica la pagina perchè altrimenti perdo il testo già inserito nell'iframe.
Il db interviene nel momento in cui io voglio caricare la tastiera, ma anche questo non è un problema perchè posso fare la query e memorizzare in un array/matrice.
Per cui:

casella di testo i-frame, tastiera con le lettere minuscole al primo caricamento, clicco su cambia e le lettere diventano maiuscole senza che la pagina si ricarica. Come mandare le lettere dalla tastiera all'iframe l'ho già fatto ma mi manca il passaggio m->M e viceversa.

Credo che javascript sia il migliore utilizzando una di quelle funzioni tipo select uno che carica select due.

[NonCeLaFaccio+]

Ho letto adesso il tuo ultimo post ma intanto avevo già fatto qualcosa, prova un po' a vedere, se ho capito bene dovresti riuscire ad adattarlo:

<html>
<head>
<style>
.nascosto {display:none;}
.visibile {display:block;}
</style>

<script type="text/javascript">
   var $c;
   function cambia() {
      if ($c == "lo") {
         document.getElementById('min').className = "visibile";
         document.getElementById('mai').className = "nascosto";
         $c = "up";
      } else {
         document.getElementById('min').className = "nascosto";
         document.getElementById('mai').className = "visibile";
         $c = "lo";
      }
   }

   function scrivi(pulsante) {
      document.getElementById('div_out').innerHTML = document.getElementById('div_out').innerHTML + pulsante.value;
   }
</script>
</head>
<body>
<?php
$matrice_caratteri[min][0]="a";
$matrice_caratteri[min][1]="b";
$matrice_caratteri[min][2]="c";
$matrice_caratteri[min][3]="d";
$matrice_caratteri[min][4]="e";
$matrice_caratteri[Maius][0]="A";
$matrice_caratteri[Maius][1]="B";
$matrice_caratteri[Maius][2]="C";
$matrice_caratteri[Maius][3]="D";
$matrice_caratteri[Maius][4]="E";
$c = "min";
print ("<div id='min' class='visibile'>\r\n");
for($i=0;$i<=4;$i++){
	print ("<input type='button' value='{$matrice_caratteri[$c][$i]}' onclick='scrivi(this)' />\r\n");
}
print ("</div>\r\n");
$c = "Maius";
print ("<div id='mai' class='nascosto'>\r\n");
for($i=0;$i<=4;$i++){
	print ("<input type='button' value='{$matrice_caratteri[$c][$i]}' onclick='scrivi(this)' />\r\n");
}
print ("</div>\r\n");
print ("<input type='button' value='cambia' onclick='cambia()' />\r\n");
?>

<div id="div_out"></div>
</body>
</html>

Ora vado a casa, mi ricollegherò domani.
Ciao

[a.forte]

Funziona, è perfetto, e non ricarica la pagina. Grazie anche per la funzione "scrivi" ma dato che rientra in un contesto già in parte costruito (editor) userò la mia ma me la conservo perchè può sempre tornare utile.
Grazie ancora, sei stato gentilissimo. Ciao.

[a.forte]

Ciao,
avrei bisogno ancora di te.
Il mio metodo per scrivere i caratteri funziona ma solo per IE, perchè uso il comando execCommand('paste', pulsante) che, come noto, non è compatibile con FireFox.
Ti spiego:
Io utilizzo l'editor di Html.it, modificato opportunamente da me, per cui ti scrivo i codici dei pezzi che riguardano questo problema:

acquisizione editor:
var str_iFrameDoc = (document.all)? "document.frames(\"Composition\").document\;": "document.getElementById(\"Composition\").contentDocument\;";

acquisizione contenuto:
iFrameDoc = eval(str_iFrameDoc);

funzione scrivi(pulsante):
setFocus();
iFrameDoc.execCommand(paste, pulsante);
setFocus();

in php:
<iframe class="Composition" width="100%" id="Composition" height="190">
</iframe>

e del codice riporto solo la riga interessata:
<input type='button' value='{$matrice_caratteri[$c][$i]}' onclick=scrivi(this.value) />

In sostanza questo metodo (paste) mi è utile perchè inserisce il carattere dove ho il cursore posizionato, ma non funziona con FireFox.
In alternativa potrei usare iFrameDoc.write(pulsante) ma mette il carattere alla fine della stringa. Per cui credo che le soluzioni siano due:

1) trovo un modo alternativo per effettuare il 'paste' anche con FF, cosa che mi servirà prima o poi perchè l'editor ha i pulsanti taglia, copia, incolla che non funzionano con FF.

2) utilizzo iFrameDoc.write(prima+pulsante+dopo) ma non so come memorizzare il testo prima e dopo il cursore.

Ti ringrazio anche se non riusciamo a risolvere il problema.
Angelo.

[NonCeLaFaccio+]

Ciao,
non ho avuto molto tempo in questi giorni però stasera finalmente sono riuscito a dare un'occhiata al tuo problema che mi ha incuriosito perché non sapevo nulla di ExecCommand e dei suoi simpatici amici quindi mi sono scaricato una decina di 3D dal forum e mi sono studiato la faccenda. Credo che siano gli stessi 3D da cui hai preso spunto tu perché le variabili hanno gli stessi nomi.

E così tra quello che ho trovato, le cose che ci siamo detti e un po' di prove ho tirato fuori questo:

<html>
<head>

<style>
.nascosto {display:none;}
.visibile {display:block;}
</style>

<script language="JavaScript">
<!--
   var bHtmlMode = false;
   var str_iFrameDoc = (document.all)? "document.frames(\"Composition\").document\;": "document.getElementById(\"Composition\").contentDocument\;";
   var $c;

   onload = initialize;

// Inizializzazione
   function initialize() {
      iFrameDoc = eval(str_iFrameDoc);
      iFrameDoc.open();
      iFrameDoc.write("<html><body MONOSPACE style='font:10pt arial,sans-serif'></body></html>");
      iFrameDoc.close();
      iFrameDoc.designMode = "On";
      document.getElementById("switchMode").checked = false;
   }

// Porta il focus al riquadro di testo
   function setFocus() {
      if (document.all) {
         document.frames('Composition').focus();
      } else {
         document.getElementById('Composition').contentWindow.focus();
      }
      return;
   }

// Controlla se la toolbar è abilitata nella modalità testo
   function validateMode() {
      if (!bHtmlMode) {
         return true;
      }
      alert("Deselezionare \"Visualizza HTML\" per utilizzare le barre degli strumenti");
      setFocus();
      return false;
   }

// Formatta il testo
   function formatC(what,opt) {
      if (!validateMode()) {
         return;
      }
      setFocus();
      iFrameDoc = eval(str_iFrameDoc);
      if(document.all) {
         switch (what) {
            case "inserthtml" : what = "paste";
            break;

            case "bold" : what = "???";
            break;

            case "italic" : what = "???";
            break;

            case "underline" : what = "???";
            break;
         }
      }
      iFrameDoc.execCommand(what,false,opt);
//       setFocus();    <-- mi sembra che non serva
   }

//Scambia tra la modalità testo e la modalità HTML.
function setMode(newMode) {
	var testo;
	bHtmlMode = newMode;
	iFrameDoc = eval(str_iFrameDoc);
	riquadro = iFrameDoc.body;
	if (document.all) {
		if (bHtmlMode) {
			testo = riquadro.innerHTML;
			riquadro.innerText = testo;
		} else {
			testo = riquadro.innerText;
			riquadro.innerHTML = testo;
		}
	} else if(document.getElementById && document.createTextNode) {
		if (bHtmlMode) {
			testo = document.createTextNode(riquadro.innerHTML);
			riquadro.innerHTML = "";
			riquadro.appendChild(testo);
		} else {
			testo = document.createRange();
			testo.selectNodeContents(riquadro);
			riquadro.innerHTML = testo.toString();
		}
	}
	setFocus();
}

   function cambia() {
      if ($c == "lo") {
         document.getElementById('min').className = "visibile";
         document.getElementById('mai').className = "nascosto";
         $c = "up";
      } else {
         document.getElementById('min').className = "nascosto";
         document.getElementById('mai').className = "visibile";
         $c = "lo";
      }
   }

   function scrivi(pulsante) {
      formatC("inserthtml", pulsante.value);
   }

-->
</script>
</head>
<body>

<form action="#" method="POST" name="composeForm">

<div id='min' class='visibile'>
   <input type='button' value='a' onclick='scrivi(this)' />
   <input type='button' value='b' onclick='scrivi(this)' />
   <input type='button' value='c' onclick='scrivi(this)' />
   <input type='button' value='d' onclick='scrivi(this)' />
   <input type='button' value='e' onclick='scrivi(this)' />
</div>

<div id='mai' class='nascosto'>
   <input type='button' value='A' onclick='scrivi(this)' />
   <input type='button' value='B' onclick='scrivi(this)' />
   <input type='button' value='C' onclick='scrivi(this)' />
   <input type='button' value='D' onclick='scrivi(this)' />
   <input type='button' value='E' onclick='scrivi(this)' />
</div>

<input type='button' value='cambia' onclick='cambia()' />

<table border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" width="100%" class="greyborder">
	<tr>
		<td>
         <table>
				<tr>
					<td>
						<div title="Grassetto" onclick="formatC('bold');">
						    [img]bold.gif[/img]
						</div>
					</td>
					<td>
						<div title="Corsivo" onclick="formatC('italic')">
						    [img]italic.gif[/img]
						</div>
					</td>
				   <td>
						<div title="Sottolineato" onclick="formatC('underline')">
						    [img]under.gif[/img]
					    </div>
					</td>
					<td>
						<div title="Allinea a sinistra" onclick="formatC('justifyleft')">
						    [img]aleft.gif[/img]
					    </div>
					</td>
					<td>
						<div title="Centra" onclick="formatC('justifycenter')">
						    [img]center.gif[/img]
						</div>
					</td>
					<td>
						<div title="Allinea a destra" onclick="formatC('justifyright')">
						    [img]aright.gif[/img]
						</div>
					</td>
					<td>
						<div title="Elenco puntato" onclick="formatC('insertorderedlist')">
						    [img]nlist.gif[/img]
					    </div>
					</td>
					<td>
						<div title="Elenco numerato" onclick="formatC('insertunorderedlist')">
						    [img]blist.gif[/img]
					  	</div>
					</td>
					<td>
						<div title="Riduci rientro" onclick="formatC('outdent')">
						    [img]ileft.gif[/img]
						</div>
					</td>
					<td>
						<div title="Aumenta rientro" onclick="formatC('indent')">
						    [img]iright.gif[/img]
						</div>
					</td>
					<td>
						<div id="taglia" title="Taglia" onclick="formatC('cut')">
					    	[img]cut.gif[/img]
					 	</div>
					</td>
					<td>
						<div id="copia" title="Copia"  onclick="formatC('copy')">
						    [img]copy.gif[/img]
  						</div>
					</td>
				  	<td>
						<div id="incolla" title="Incolla" onclick="formatC('paste')">
						    [img]paste.gif[/img]
					    </div>
					</td>
					<td>
						<input type="checkbox" name="switchMode" id="switchMode" onclick="setMode(switchMode.checked)">
						<font color="#000000">Visualizza HTML | </font>
					</td>
					<td>
						Rimuovi Formattazione Carattere
					</td>
			  	</tr>
			</table>

			<iframe class="Composition" width="50%" id="Composition" height="190">
			</iframe>
		</td>
	</tr>
</table>
</body>
</html>

Come vedi si tratta sostanzialmente di uno dei 3D ripulito e ordinato e arricchito dei pulsanti per le lettere (direttamente in html, ho bypassato il php perché mi faceva perdere tempo).

Mi sembra che cominci a funzionare benino su tutti i browser (provato sui cinque classici), e che restino due sole cose da mettere ancora a posto, la prima è che la trasformazione da html a testo e viceversa non funziona su tutti (questo credo che sia dovuto al fatto che solo IE, a quanto ne so, supporta la innerText), però non mi ci sono ancora soffermato con calma e l'altra è che le stringhe da passare ai browser per ottenere un certo comando sono diverse, per esempio "inserthtml" diventa "paste" nel caso di IE (occhio che può darsi che stia dicendo una stupidaggine, è solo da poche ore che sto giocando con queste cose, però sembra funzionare), mentre "justifycenter" funziona per tutti. La switch lasciata incompleta con i ??? serve a questo, dovrai documentarti un po' e cercare di capire quali nomi vanno usati.

Facci sapere come procede il lavoro.

Ciao