formattare il testo in textarea

[digitm]

Vorrei utilizzare il seguente script per far si che si possa formattare il testo scritto in una textarea. In particolare, una volta digitato il testo, selezionandolo, si dovrà poter cambiare il carattere, il suo colore e la dimensione. Ma non va, perchè?


<script language="JavaScript">
function FormatTextShort(command, option){

id_risposta.messaggio.document.execCommand(command , true, option);
id_risposta.messaggio.focus();
}
</script>


<select name="selectShortText" onChange="FormatTextShort('FontName', selectShortText.options[selectShortText.selectedIndex].value);document.messaggio.selectShortText.options[0].selected = true;" >
<option value="0" selected>-- Font Type --</option>
<option value="Arial, Helvetica, sans-serif">Arial</option>
<option value="Times New Roman, Times, serif">Times</option>
<option value="Courier New, Courier, mono">Courier New</option>
<option value="Verdana, Arial, Helvetica, sans-serif">Verdana</option>
</select>

<select name="selectShortFontSize" onChange="FormatTextShort('FontSize', selectShortFontSize.options[selectShortFontSize.selectedIndex].value);document.messaggio.selectShortFontSize.opt ions[0].selected = true;" >
<option value="0" selected>-- Font Size --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>

<select name="selectShortFontColour" onChange="FormatTextShort('ForeColor', selectShortFontColour.options[selectShortFontColour.selectedIndex].value);document.messaggio.selectShortFontColour.o ptions[0].selected = true;" >
<option value="0" selected>-- Font Colour --</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="brown">Brown</option>
<option value="magenta">Magenta</option>
<option value="cyan">Cyan</option>
<option value="limegreen">Lime Green</option>
</select>

<font color="#FFFFFF">
<input type="hidden" name="id_risposta" value="<%=id%>">


<textarea name="messaggio" rows="10" style="width: 500"></textarea>


</font>

<input name="submit" type="submit" value="Rispondi" style="height: 17px; color: #000000; background-color: #99CC00; border-top : 1px solid; border-bottom : 1px solid; border-left : 1px solid; border-right : 1px solid; border-color: #ffffff; font-family : Verdana,tahoma,Arial; font-size : 10px; font-weight: bold;">
</form>

[willybit]

Ciao digitm,

in quello script ci sono tante cose che non vanno... e comunque non puoi formattare il testo di una textarea. Devi usare un layer con contenteditable=true

[willybit]

ti sistemo il codice e ti metto un esempio

<script  language="JavaScript">
function FormatTextShort(command, option){
	
  	document.execCommand(command, true, option);
  	NomeForm.messaggio.focus();
}
</script>

<form name="NomeForm">

<select name="selectShortText" onChange="FormatTextShort('FontName', this.options[this.selectedIndex].value);this.options[0].selected = true;" >
<option value="0" selected>-- Font Type --</option>
<option value="Arial, Helvetica, sans-serif">Arial</option>
<option value="Times New Roman, Times, serif">Times</option>
<option value="Courier New, Courier, mono">Courier New</option>
<option value="Verdana, Arial, Helvetica, sans-serif">Verdana</option>
</select>

<select name="selectShortFontSize" onChange="FormatTextShort('FontSize', this.options[this.selectedIndex].value);this.options[0].selected = true;" >
<option value="0" selected>-- Font Size --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
               
<select name="selectShortFontColour" onChange="FormatTextShort('ForeColor', this.options[this.selectedIndex].value);this.options[0].selected = true;" >
<option value="0" selected>-- Font Colour --</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="brown">Brown</option>
<option value="magenta">Magenta</option>
<option value="cyan">Cyan</option>
<option value="limegreen">Lime Green</option>
</select>
                
<font color="#FFFFFF"> 
<input type="hidden" name="id_risposta" value="<%=id%>">


<textarea name="messaggio" rows="10" style="width: 500"></textarea>


</font>

<input name="submit" type="submit" value="Rispondi" style="height: 17px; color: #000000; background-color: #99CC00; border-top : 1px solid; border-bottom : 1px solid; border-left : 1px solid; border-right : 1px solid;  border-color: #ffffff; font-family : Verdana,tahoma,Arial; font-size : 10px; font-weight: bold;">
</form>
questo testo puoi formattarlo

<div contenteditable=true>questo testo puoi editarlo e formattarlo</div>

quota il messaggio e copia dalla textarea quello che sta tra [code] e [/code]

[digitm]

Ho riscritto il tutto così, ma non va.... Cosa intendi con le due frasi alla fine? (questo testo puoi formattarlo, questo testo puoi editarlo e formattarlo)

Scusa l'ignoranza



<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">
function FormatTextShort(command, option){

document.execCommand(command, true, option);
NomeForm.messaggio.focus();
}
</script>

</head>

<body>
<form name="NomeForm">

<select name="selectShortText" onChange="FormatTextShort('FontName', this.options[this.selectedIndex].value);this.options[0].selected = true;" >
<option value="0" selected>-- Font Type --</option>
<option value="Arial, Helvetica, sans-serif">Arial</option>
<option value="Times New Roman, Times, serif">Times</option>
<option value="Courier New, Courier, mono">Courier New</option>
<option value="Verdana, Arial, Helvetica, sans-serif">Verdana</option>
</select>

<select name="selectShortFontSize" onChange="FormatTextShort('FontSize', this.options[this.selectedIndex].value);this.options[0].selected = true;" >
<option value="0" selected>-- Font Size --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>

<select name="selectShortFontColour" onChange="FormatTextShort('ForeColor', this.options[this.selectedIndex].value);this.options[0].selected = true;" >
<option value="0" selected>-- Font Colour --</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="brown">Brown</option>
<option value="magenta">Magenta</option>
<option value="cyan">Cyan</option>
<option value="limegreen">Lime Green</option>
</select>

<font color="#FFFFFF">
<input type="hidden" name="id_risposta" value="<%=id%>">


<textarea name="messaggio" rows="10" style="width: 500"></textarea>


</font>

<input name="submit" type="submit" value="Rispondi" style="height: 17px; color: #000000; background-color: #99CC00; border-top : 1px solid; border-bottom : 1px solid; border-left : 1px solid; border-right : 1px solid; border-color: #ffffff; font-family : Verdana,tahoma,Arial; font-size : 10px; font-weight: bold;">
</form>
questo testo puoi formattarlo

<div contenteditable=true>questo testo puoi editarlo e formattarlo</div>

</body>
</html>

[willybit]

Originariamente inviato da digitm
Ho riscritto il tutto così, ma non va.... Cosa intendi con le due frasi alla fine? (questo testo puoi formattarlo, questo testo puoi editarlo e formattarlo)

ripeto: il testo nella textarea non può essere formattato.
le due frasi sotto le ho messe da esempio... seleziona una delle due frasi sotto, prova la formattazione e vedrai che va. La seconda frase è editabile, cioè se la clicchi puoi scriverci con la tastiera (solo con IE)