Inserire TAG su textarea

**peppeweb** · 11-11-2011, 08:12

Ciao a tutti,

utilizzo questo script per inserire e/o modificare dei tag all'interno di una textarea:

<script language="JavaScript" type="text/javascript">

</script>

<input id="btn" class="codeLighterButton" type="button" value="[B]" onclick="TestoDescrizione('B')">
<input id="btn" class="codeLighterButton" type="button" value="[I]" onclick="TestoDescrizione('I')">
<input id="btn" class="codeLighterButton" type="button" value="[U]" onclick="TestoDescrizione('U')">

<textarea rows="6" name="Descrizione" id="Descrizione" cols="100" style="font-family: Arial; font-size: 8pt; border-style: dotted; border-width: 1px; padding-left:2px; padding-right:2px; " class="bordures"><%=Descrizione%></textarea> </font>

su IE funziona perfettamente mentre su gli altri browser no, come posso risolvere il problema ?

**br1** · 11-11-2011, 09:06

Provato su Chrome... e non capisco cosa vuoi dire con "non funziona"?... cosa ti aspetti che faccia?

**peppeweb** · 11-11-2011, 10:31

Scusa br1,

grazie per la risposta ma quello che mi aspetto che faccia è semplicemente che se seleziono una parola all'interno della textarea e poi clicco sul bottone [B] mi trasformi la parola selezionata in grassetto.

questo è il link di una pagina di prova:

http://www.pippogiacalone.it/Prova.asp

se la apro con crome non funge !!

**cavicchiandrea** · 11-11-2011, 10:43

Controlla che document.selection.createRange() sia supportato da firefox e co (non mi sembra) e quasi sicuramente non è supportato text che forse basterebbe sostituire con innerHTML

**peppeweb** · 11-11-2011, 10:49

dici così ?

<script language="JavaScript" type="text/javascript">

</script>

ho provato ma non funziona

**cavicchiandrea** · 11-11-2011, 11:05

Ribadisco che document.selection.createRange(); non credo sia supportato da firefox & co (chome, safari, etc..)

**peppeweb** · 11-11-2011, 11:19

scusa l'ignoranza ... ma c'è modo di risolvere il problema o devo per forza passare ad un editor

**cavicchiandrea** · 11-11-2011, 11:56

vedi qui se puoi prendere spunti

**peppeweb** · 11-11-2011, 12:31

grazie ci provo

**carlomarx** · 18-11-2011, 09:49

Questo fa esattamente quello che chiedi…

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDC Example</title>
<script type="text/javascript">
	function insertMetachars(sStartTag, sEndTag) {
		var bDouble = arguments.length > 1, oMsgInput = document.myForm.myTxtArea, nSelStart = oMsgInput.selectionStart, nSelEnd = oMsgInput.selectionEnd, sOldText = oMsgInput.value;
		oMsgInput.value = sOldText.substring(0, nSelStart) + (bDouble ? sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag : sStartTag) + sOldText.substring(nSelEnd);
		oMsgInput.setSelectionRange(bDouble || nSelStart === nSelEnd ? nSelStart + sStartTag.length : nSelStart, (bDouble ? nSelEnd : nSelStart) + sStartTag.length);
		oMsgInput.focus();
	}
</script>
<style type="text/css">
	.intLink {
		cursor: pointer;
		text-decoration: underline;
		color: #0000ff;
	}
</style>
</head>

<body>

<form name="myForm">


[<span class="intLink" onclick="insertMetachars('&lt;strong&gt;','&lt;\/strong&gt;');">Bold</span> | <span class="intLink" onclick="insertMetachars('&lt;em&gt;','&lt;\/em&gt;');">Italic</span> | <span class="intLink" onclick="var newURL=prompt('Enter the full URL for the link');if(newURL){insertMetachars('&lt;a href=\u0022'+newURL+'\u0022&gt;','&lt;\/a&gt;');}else{document.myForm.myTxtArea.focus();}">URL</span> | <span class="intLink" onclick="insertMetachars('\n&lt;code&gt;\n','\n&lt;\/code&gt;\n');">code</span> | <span class="intLink" onclick="insertMetachars(' :-)');">smile</span> | etc. etc.]</p>


<textarea rows="10" cols="50" name="myTxtArea">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem. </textarea></p>
</form>

</body>
</html>

Discussione: Inserire TAG su textarea

Strumenti discussione

Ricerca discussione

Visualizza

Inserire TAG su textarea

Permessi di invio