posizionamento cursore

**marco_rx** · 19-06-2011, 14:29

Salve, vorrei realizzare una funzione che mi permetta di inserire (al click su un input) dei bbcode in una textarea, e fin qui tutto ok. Quello che non so come fare è posizionare il cursore del mouse al centro tra l'inizio e la fine del bbcode; e come selezionato un testo mi aggiunga (cliccando sull'input) agli estremi della parte selezionata l'inizio e la fine de bbcode.

**cavicchiandrea** · 19-06-2011, 14:56

Dopo averlo letto quattro volte (cosa che dovrebbe fare chi scrive) senza capire il problema mi limito a segnalarti questa discussione nel caso non sia quello che cechi come non detto.

**carlomarx** · 19-06-2011, 15:17

Qui hai tutto quello che ti serve per modificare il mio esempio...
https://developer.mozilla.org/en/DOM...extAreaElement

P.S. Ti ricordo che Google è vivo e lotta insieme a noi... la prossima volta consultalo!

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<title>Esempio per il Forum di HTML.it</title>
<script type="text/javascript">
	function nuovoTag(sStartTag1, sEndTag1) {
		var nNewCursorPos = document.miaForm.miaTA.value.length + sStartTag1.length;
		document.miaForm.miaTA.value += sStartTag1 + sEndTag1;
		document.miaForm.miaTA.selectionStart = document.miaForm.miaTA.selectionEnd = nNewCursorPos;
		document.miaForm.miaTA.focus();
	}

	function racchiudiTesto(sStartTag2, sEndTag2) {
		var nSelStart = document.miaForm.miaTA.selectionStart, nSelEnd = document.miaForm.miaTA.selectionEnd;
		if (nSelStart === nSelEnd) { alert("Devi selezionare una porzione di testo!!"); return; }
		var sOldText = document.miaForm.miaTA.value;
		document.miaForm.miaTA.value = sOldText.substring(0, nSelStart) + sStartTag2 + sOldText.substring(nSelStart, nSelEnd) + sEndTag2 + sOldText.substring(nSelEnd, sOldText.length);
		document.miaForm.miaTA.setSelectionRange(nSelStart + sStartTag2.length, nSelEnd + sStartTag2.length);
		document.miaForm.miaTA.focus();
	}
</script>
<style type="text/css">
	.intLink {
		cursor: pointer;
		text-decoration: underline;
		color: #0000ff;
	}
</style>
</head>

<body>

<form name="miaForm">


[&amp;nbsp;<span class="intLink" onclick="nuovoTag('[TAG1]','[/TAG1]');">Nuovo tag</span> | <span class="intLink" onclick="racchiudiTesto('[TAG2]','[/TAG2]');">Racchiudi testo selezionato in un tag</span>&amp;nbsp;]</p>


<textarea rows="10" cols="50" name="miaTA">Testo di esempio</textarea></p>
</form>

</body>
</html>

**carlomarx** · 20-06-2011, 12:20

in realtà stavo pensando che quello che ti potrebbe servire sia qualcosa di più semplice ma più funzionale...

[CODE]
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="it" />
<title>Esempio per il Forum di HTML.it</title>
<script type="text/javascript">
function surroundText(sStartTag, sEndTag) {
var nSelStart = document.myForm.myTxtArea.selectionStart, nSelEnd = document.myForm.myTxtArea.selectionEnd, sOldText = document.myForm.myTxtArea.value;
document.myForm.myTxtArea.value = sOldText.substring(0, nSelStart) + sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag + sOldText.substr(nSelEnd);
document.myForm.myTxtArea.setSelectionRange(nSelSt art + sStartTag.length, nSelEnd + sStartTag.length);
document.myForm.myTxtArea.focus();
}

function replaceText(sNewText) {
var nSelStart = document.myForm.myTxtArea.selectionStart, nSelEnd = document.myForm.myTxtArea.selectionEnd, sOldText = document.myForm.myTxtArea.value;
document.myForm.myTxtArea.value = sOldText.substring(0, nSelStart) + sNewText + sOldText.substr(nSelEnd);
document.myForm.myTxtArea.setSelectionRange(nSelSt art === nSelEnd ? nSelStart + sNewText.length : nSelStart, nSelStart + sNewText.length);
document.myForm.myTxtArea.focus();
}
</script>
<style type="text/css">
.intLink {
cursor: pointer;
text-decoration: underline;
color: #0000ff;
}
</style>
</head>

<body>

Quest'esempio funziona sia che ci sia del testo selezionato nella textarea sia che non ci sia.</p>
<form name="myForm">

[&nbsp;<span class="intLink" onclick="surroundText('[B]','[\/B]');">grassetto</span> | <span class="intLink" onclick="surroundText('[I]','[\/I]');">corsivo</span> | <span class="intLink" onclick="surroundText('[URL='+prompt('Enter the full URL for the link')+']','[\/URL]');">collegamento</span> | <span class="intLink" onclick="surroundText('\n

codice:

\n','\n[\/CODE]\n');">codice</span> | <span class="intLink" onclick="replaceText(' :-)');">smile</span> | etc. etc.&amp;nbsp;]</p>


<textarea rows="10" cols="50" name="myTxtArea">Testo di esempio</textarea></p>
</form>

</body>
</html>

@Xinod e @br1
Date uno sguardo a queste due semplici funzioni... credo sarebbe una buona idea utilizzarle per il form delle risposte di questo forum. Potrebbe sembrare una cosa da poco, ma avere il cursore posizionato al posto giusto dopo l'inserimento di un tag o di uno smile non è cosa da buttar via... Che ne pensate?

**Xinod** · 20-06-2011, 13:18

ne abbiamo gia' parlato in passato con chi di dovere

non dipende da noi

**carlomarx** · 20-06-2011, 13:37

**marco_rx** · 20-06-2011, 16:46

in realtà stavo pensando che quello che ti potrebbe servire sia qualcosa di più semplice ma più funzionale...

Si era proprio questo che intendevo, grazie mille

e scusate ancora se non mi sono fatto capire

**carlomarx** · 22-06-2011, 13:42

Scusate se continuo a postare codice, ma stavo pensando che se le funzioni devono rimanere quelle due che ho scritto io, allora è meglio unificarle in un'unica funzione per rimuovere le parti di codice in comune...

[CODE]
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio per il Forum di HTML.it</title>
<script type="text/javascript">
function insertMetaChar(sStartTag, sEndTag) {
var oMsgInput = document.myForm.myTxtArea, nSelStart = oMsgInput.selectionStart, nSelEnd = oMsgInput.selectionEnd, sOldText = oMsgInput.value;
if (arguments.length > 1) {
oMsgInput.value = sOldText.substring(0, nSelStart) + sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag + sOldText.substring(nSelEnd);
oMsgInput.setSelectionRange(nSelStart + sStartTag.length, nSelEnd + sStartTag.length);
} else {
oMsgInput.value = sOldText.substring(0, nSelStart) + sStartTag + sOldText.substring(nSelEnd);
oMsgInput.setSelectionRange(nSelStart === nSelEnd ? nSelStart + sStartTag.length : nSelStart, nSelStart + sStartTag.length);
}
oMsgInput.focus();
}
</script>
<style type="text/css">
.intLink {
cursor: pointer;
text-decoration: underline;
color: #0000ff;
}
</style>
</head>

<body>

Quest'esempio funziona sia che ci sia del testo selezionato nella textarea sia che non ci sia.</p>
<form name="myForm">

[&nbsp;<span class="intLink" onclick="insertMetaChar('[B]','[\/B]');">grassetto</span> | <span class="intLink" onclick="insertMetaChar('[I]','[\/I]');">corsivo</span> | <span class="intLink" onclick="insertMetaChar('[URL='+prompt('Enter the full URL for the link')+']','[\/URL]');">collegamento</span> | <span class="intLink" onclick="insertMetaChar('\n

codice:

\n','\n[\/CODE]\n');">codice</span> | <span class="intLink" onclick="insertMetaChar(' :-)');">smile</span> | etc. etc.&amp;nbsp;]</p>


<textarea rows="10" cols="50" name="myTxtArea">Testo di esempio</textarea></p>
</form>

</body>
</html>

Discussione: posizionamento cursore

Strumenti discussione

Ricerca discussione

Visualizza

posizionamento cursore

Permessi di invio