Formattazione testo textarea

**french** · 14-07-2003, 11:05

Ciao a tutti.
Io uso un javascript per aggiugere la formattazione al testo nelle textarea. Lo posto qui di seguito:

codice:

function Aggiungi(formattazione)
{

switch(formattazione)
{

case "bold": // se formattazione è = a "grassetto"
bld=prompt('Inserisci il testo che deve essere visualizzato come grassetto','');
if(bld==null) { document.nome_form.nome_textarea.focus(); return; }
testo=""+bld+"";
document.nome_form.nome_textarea.value+=testo;
break;

case "italic": // se formattazione è = a "corsivo"
ita=prompt('Inserisci il testo che deve essere visualizzato come corsivo','');
if(ita==null) { document.nome_form.nome_textarea.focus(); return; }
testo=""+ita+"";
document.nome_form.nome_textarea.value+=testo;
break;

case "underline": // se formattazione è = a "sottolineato"
und=prompt('Inserisci il testo che deve essere visualizzato come sottolineato','');
if(und==null) { document.nome_form.nome_textarea.focus(); return; }
testo="<u>"+und+"</u>";
document.nome_form.nome_textarea.value+=testo;
}
}

Poi nella pagina, associato ad un'immagine:

codice:

[img]images/ico_bold.gif[/img]

Quando devo inserire la formattazione su più textarea, duplico lo script, lo rinomino "function Aggiungi1(formattazione)" e così via..., e cambio il nome della textarea nello script.
Mi chiedo se sia possibile rendere disponibile la formattazione ad altre textarea senza dover duplicare ogni volta tutto lo script.

Un grazie anticipato a chi mi aiuta.

**floyd** · 14-07-2003, 11:20

prova così
[img]images/ico_bold.gif[/img]
[img]images/ico_bold.gif[/img]
<textarea name="ta1" />
<textarea name="ta2" />
<script>
function Aggiungi(formattazione, ta) {
field = document.nome_form.elements[ta];
field.value += testo;
}
</script>

**french** · 14-07-2003, 11:49

Originariamente inviato da floyd
prova così
[img]images/ico_bold.gif[/img]
[img]images/ico_bold.gif[/img]
<textarea name="ta1" />
<textarea name="ta2" />
<script>
function Aggiungi(formattazione, ta) {
field = document.nome_form.elements[ta];
field.value += testo;
}
</script>

Non riesco a capire come integrare la parte fra <script> e </script> nel mio codice: potresti farmi un esempio, così capisco?

Grazie

**badaze** · 14-07-2003, 11:58

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function Aggiungi(textarea,formattazione)
{

switch(formattazione)
{

case "bold": // se formattazione è = a "grassetto"
bld=prompt('Inserisci il testo che deve essere visualizzato come grassetto','');
if(bld==null) { textarea.focus(); return; }
testo=""+bld+"";
textarea.value+=testo;
break;

case "italic": // se formattazione è = a "corsivo"
ita=prompt('Inserisci il testo che deve essere visualizzato come corsivo','');
if(ita==null) { textarea.focus(); return; }
testo=""+ita+"";
textarea.value+=testo;
break;

case "underline": // se formattazione è = a "sottolineato"
und=prompt('Inserisci il testo che deve essere visualizzato come sottolineato','');
if(und==null) { textarea.focus(); return; }
testo="<u>"+und+"</u>";
textarea.value+=testo;
}
}

//-->
</script>

<textarea name="tx1" rows="10" cols="50"></textarea>


<input type="button" value="G" onclick="Aggiungi(tx1,'bold');">


<textarea name="tx2" rows="10" cols="50"></textarea>


<input type="button" value="G" onclick="Aggiungi(tx2,'bold');">


</body>
</html>

**french** · 14-07-2003, 13:57

Originariamente inviato da badaze

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function Aggiungi(textarea,formattazione)
{

switch(formattazione)
{

case "bold": // se formattazione è = a "grassetto"
bld=prompt('Inserisci il testo che deve essere visualizzato come grassetto','');
if(bld==null) { textarea.focus(); return; }
testo=""+bld+"";
textarea.value+=testo;
break;

case "italic": // se formattazione è = a "corsivo"
ita=prompt('Inserisci il testo che deve essere visualizzato come corsivo','');
if(ita==null) { textarea.focus(); return; }
testo=""+ita+"";
textarea.value+=testo;
break;

case "underline": // se formattazione è = a "sottolineato"
und=prompt('Inserisci il testo che deve essere visualizzato come sottolineato','');
if(und==null) { textarea.focus(); return; }
testo="<u>"+und+"</u>";
textarea.value+=testo;
}
}

//-->
</script>

<textarea name="tx1" rows="10" cols="50"></textarea>


<input type="button" value="G" onclick="Aggiungi(tx1,'bold');">


<textarea name="tx2" rows="10" cols="50"></textarea>


<input type="button" value="G" onclick="Aggiungi(tx2,'bold');">


</body>
</html>

Perfetto!! Funziona benissimo, ti ringrazio.
Mi risolve anche il problema di dare ogni volta un nome al form. Metto giù lo script completo se a qualcuno può servire, visto che ho anche la formattazione per link ed e-mail.

codice:

<script language="JavaScript" type="text/javascript">
<!--
function Aggiungi(textarea,formattazione)
{
switch(formattazione)
{
case "link": // se formattazione è = a "link"
url=prompt('Inserire il link della pagina che si vuole raggiungere','http://');
if(url==null) { textarea.focus(); return; }
testo=prompt('Inserire il testo che sarà visualizzato','');
textarea.value+=""+testo+"";
break;

case "mail": // se formattazione è = a "mail"
url=prompt('Inserire l\'indirizzo mail','');
if(url==null) { textarea.focus(); return; }
testo=prompt('Inserire il testo che sarà visualizzato','');
textarea.value+=""+testo+"";
break;

case "bold": // se formattazione è = a "grassetto"
bld=prompt('Inserisci il testo che deve essere visualizzato come grassetto','');
if(bld==null) { textarea.focus(); return; }
testo=""+bld+"";
textarea.value+=testo;
break;

case "italic": // se formattazione è = a "corsivo"
ita=prompt('Inserisci il testo che deve essere visualizzato come corsivo','');
if(ita==null) { textarea.focus(); return; }
testo=""+ita+"";
textarea.value+=testo;
break;

case "underline": // se formattazione è = a "sottolineato"
und=prompt('Inserisci il testo che deve essere visualizzato come sottolineato','');
if(und==null) { textarea.focus(); return; }
testo="<u>"+und+"</u>";
textarea.value+=testo;
break;
}
}

//-->
</script>

Ciao.

**badaze** · 14-07-2003, 15:07

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
var stTxt1  = true;
var stTxt2  = true;
var stTxt10 = true;
var stTxt20 = true;

btnStatus        = new Array(true,false);
btnStatus[true]  = '*';
btnStatus[false] = ' ';

bold          = new Array(true,false);
bold[true]    = '';
bold[false]   = '';

italic        = new Array(true,false);
italic[true]  = '';
italic[false] = '';

function Aggiungi(button,textarea,formattazione, status) {
 textarea.value += formattazione[status];
 if (! status) {
  ch = ' ';
  re = /\*/i
 } else {
  ch = '*'; 
  re = / /i
 }
 button.value    =  button.value.replace(re, ch);
}
//-->
</script>

<title>Untitled</title>
</head>
<body>
<textarea name="tx1" rows="10" cols="50"></textarea>


<input type="button" name="b1" value="   G " onclick="Aggiungi(this,tx1,bold,stTxt1);stTxt1=!stTxt1;">
<input type="button" name="b1" value="   I " onclick="Aggiungi(this,tx1,italic,stTxt10);stTxt10=!stTxt10;">



<textarea name="tx2" rows="10" cols="50"></textarea>


<input type="button" name="b2" value="   G " onclick="Aggiungi(this,tx2,bold,stTxt2);stTxt2=!stTxt2;">
<input type="button" name="b2" value="   I " onclick="Aggiungi(this,tx2,italic,stTxt20);stTxt20=!stTxt20;">

</body>
</html>

**french** · 14-07-2003, 15:26

Veramente interessante. Complimenti.

Ciao.

**badaze** · 14-07-2003, 16:49

Grazie !!!!

Adesso puoi selezionare testo e cliccare sul bottone !!!

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
var stTxt1  = true;
var stTxt2  = true;
var stTxt10 = true;
var stTxt20 = true;

btnStatus        = new Array(true,false);
btnStatus[true]  = '*';
btnStatus[false] = ' ';

bold          = new Array(true,false);
bold[true]    = '';
bold[false]   = '';

italic        = new Array(true,false);
italic[true]  = '';
italic[false] = '';

function Aggiungi(button,textarea,formattazione, status) {

 selectedText = document.selection.createRange().text;
 if (selectedText) {
   document.selection.createRange().text = formattazione[true] + selectedText + formattazione[false];
	 document.selection.empty()
  return status;
 } // if (selectedText)
 
 textarea.value += formattazione[status];
 if (! status) {
  ch = ' ';
  re = /\*/i
 } else {
  ch = '*'; 
  re = / /i
 }
 button.value    =  button.value.replace(re, ch);
 return ! status;
}
//-->
</script>

<title>Untitled</title>
</head>
<body>
<textarea name="tx1" rows="10" cols="50"></textarea>


<input type="button" name="b1" value="   G " onclick="stTxt1=Aggiungi(this,tx1,bold,stTxt1);">
<input type="button" name="b1" value="   I " onclick="stTxt10=Aggiungi(this,tx1,italic,stTxt10);">



<textarea name="tx2" rows="10" cols="50"></textarea>


<input type="button" name="b2" value="   G " onclick="stTxt2=Aggiungi(this,tx2,bold,stTxt2);">
<input type="button" name="b2" value="   I " onclick="stTxt20=Aggiungi(this,tx2,italic,stTxt20);">

</body>
</html>

**french** · 14-07-2003, 17:08

Questo è ancora più interessante...
Però ho notato che non funziona con Mozilla ...se lo fosse sarebbe perfetto.

Ciao e grazie

**badaze** · 14-07-2003, 17:11

Cosa vuoi, la Micro$oft non riesce mai a fare le cose come tutti... deve sempre rendere i suoi prodotti incompatibili con gli altri !!!

Discussione: Formattazione testo textarea

Strumenti discussione

Ricerca discussione

Visualizza

Formattazione testo textarea

Permessi di invio