JS: modifica testo selezionato in textarea

lunedì 08 settembre 2008 - 21.06

shark986 Profilo | Junior Member

Ciao a tutti.
Scusate la domanda ma non sono molto ferrato in JavaScript....
Ho cercato un pò in giro ma non sono riuscito a farmi un'idea precisa.

Vorrei poter modificare da codice il testo selezionato in una textarea...
Con questo codice riesco a recuperare il testo selezionato...
txt = ""; if (window.getSelection) txt = window.getSelection(); else if (document.getSelection) txt = document.getSelection(); else if (document.selection) txt = document.selection.createRange().text;
Ma non credo sia questa la strada corretta perchè nella variabile txt mi rimane solo una stringa... Credo che mi serva un oggetto in cui modificare il testo della textarea!
Vorrei realizzare in una pagina una lista di emoticon, cliccando sulle quali il testo selezionato nella textarea viene modificato nel relativo codice (ad esempio il testo selezionato ":)" mi viene trasformato in "[smile]").
Mi date qualche input? Ho trovato un pò di docs su Selection, Range e simili... Ma non ho le idee molto chiare!!

Grazie a tutti!
Nick

I computer sanno contare solo da 0 a 1, il resto è illusione...
Il mio sitarello: http://www.shark986.altervista.org/

Faelar Profilo | Junior Member

Ci sono diversi modi per farlo, e dipendono da cosa devi effettivamente fare.


Prova a vedere se così risolvi il tuo problema:

var objTxtArea = document.getElementById("txtArea");

if (objTxtArea == null)
alert("Oggetto nullo");
else
objTxtArea.innerHTML = objTxtArea.innerHTML + "testo da inserire";

shark986 Profilo | Junior Member

Ciao,
effettivamente.. Dovrei poter modificare il testo selezionato nella textarea con altro codice!

Se non ho capito male, con il tuo codice riesco ad aggiungere una stringa alla fine di ciò che è già scritto nella textarea.
Questo lo faccio già con
document.getElementById('commento').value = document.getElementById('commento').value + code; //code è un parametro passato alla funzione

Io invece desidero modificare del testo!
uhm.... Prova a rispondere al post, scrivi ad esempio "FACCINA", poi selezioni il testo "FACCINA" e clicchi su una delle emoticon che trovi sopra alla textarea in cui stai scrivendo...
Visto cosa accade? Se clicchi sulla prima faccina, il testo "FACCINA" viene sostituito dalla stringa "[ : ) ]" (senza gli spazi ovviamente)..
Io vorrei realizzare la stessa cosa!

Spero di essere riuscito a spiegarmi...

Grazie comunque per la risposta!

PS: Un'altra domanda... Utilizzando la proprietà "id" nel tag textarea, rientro nelle specifice xhtml 1.0 (voglio che il sito sia validato)?!
I computer sanno contare solo da 0 a 1, il resto è illusione...
Il mio sitarello: http://www.shark986.altervista.org/

Faelar Profilo | Junior Member

Scusami, hai ragione!!!

Non ho letto bene il testo del topic...


Questo codice l'ho testato su Opera, Google, Firefox, IE7:

if (document.selection){
var sel = document.selection.createRange();
sel.text = "smile!";
}else{
var objTxtArea = document.getElementById("txtArea");
var str = objTxtArea.value;
var len = objTxtArea.length;
var start = objTxtArea.selectionStart;
var end = objTxtArea.selectionEnd;

objTxtArea.value = objTxtArea.value.substring(0, start) + "smile!" + objTxtArea.value.substring(end, len);
}


Spero di aver capito bene adesso!!!


Per la tua domanda sull'ID, diciamo che ci sono due standard di base IE7 e firefox... Per il primo serve l'id, per il secondo serve name.
Se li metti entrambi non sbagli sicuro.

shark986 Profilo | Junior Member

Ciao!
Scusa il ritardo ma ho avuto un pò da fare!
Comunque ho avuto qualche problemino con il tuo ultimo script... con IE tutto bene, Firefox3 però mi dava errori sul "txtArea.length".. poi ho cercato un pò... questo lo script finale
function emoticon(campo, code) { var myField = document.getElementById(campo); var myValue = code; if (document.selection) { // IE myField.focus(); sel = document.selection.createRange(); sel.text = myValue; } else if (myField.selectionStart || myField.selectionStart == '0') { // MOZILLA/NETSCAPE var startPos = myField.selectionStart; var endPos = myField.selectionEnd; myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length); } else { myField.value += myValue; } }
Con lo script scritto in questo modo, "code" viene inserito al posto del testo selezionato, oppure, senza selezione, dove si trova il cursore!
Quindi meglio di quel che m'aspettassi!

Grazie dell'aiuto, è stato fondamentale!!
Però.. Che bel sitarello che stà venendo a poco a poco!!!!
Ciaoo, Grazie!!!

PS: Dimenticavo, ho dovuto mettere la proprietà "id" con lo stesso valore di "name" nel tag "textarea" per avere la compatibilità con Firefox, perchè con "name" IE funzionava e Firefox no.
Anche ai fini della validazione xhtml, è tutto ok!


I computer sanno contare solo da 0 a 1, il resto è illusione...
Il mio sitarello: http://www.shark986.altervista.org/
Partecipa anche tu! Registrati!
Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !
Copyright © dotNetHell.it 2002-2024
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5