[JavaScript] Inserire tag in form

Quante volte c’è capitato di trovarci di fronte ad un form dove scrivere del testo libero? Nei forum, nei blog, nei moduli di richiesta informazioni… Spesso, se la nostra insert sarà destinata ad essere parte integrante di un contenuto web (è il caso lampante dei forum e dei commenti nei blog), i webmaster danno la possibilità all’utente di integrare codice html (spesso sotto forma di BBCode).

Come fare per agevolare un facile inserimento dei tag? Oltre ad inserire delle semplici istruzioni d’uso, come posso automatizzare il tutto?
Beh, un po’ di javascript ci viene in aiuto : - ) . Ipotizziamo di avere un form del genere:

<form name="form" id="SomeID" action="SomeAct" method="GET/POST" >
<div>
<input type="submit" value="strong" id="strong" />
<input type="submit" value="i" id="i" />
</div>
<div>
<textarea id="testo" cols="45" rows="15"></textarea>
</div>
</form>

Come potrete vedere nell’esempio, è solo un form con una textarea e due tasti, che andremo ad usare per i nostri scopi: l’inserimento di tag html con un click del mouse.
Badate bene che gli id assegnati ai campi input NON son casuali : - ) .

function tagging(id,ide){

 var e = document.getElementById(id);
 var a = document.getElementById(ide);
 
 var st = e.selectionStart;
 var en = e.selectionEnd;

 if(e.value.substring(st, en) != 0){
   if(st != en){
  e.value = e.value.substring(0, st)
             + ‘<‘ + ide + ‘>’
             + e.value.substring(st, en)
             + ‘</’ + ide + ‘>’
             + e.value.substring(en, e.value.length);
   }
  }else{

  if(a.value == ide){
     e.value += ‘<‘ + ide + ‘>’;
     a.value = ‘/’ + ide;
  }else{
     e.value += ‘</’ + ide + ‘>’;
     a.value = ide;
  }
 }
}

Commentiamola!

Il tutto è funzione di id e ide, che sono rispettivamente l’id assegnato alla textarea e l’id assegnato al singolo pulsante di tagging.

Il valore dell’id del pulsante deve essere uguale al valore di value, che a sua volta deve corrispondere al tag che andremo ad inserire.

La funzione verte su due casistiche fondamentali:

  1. L’utente ha selezionato parte del testo da taggare.
  2. L’utente non ha selezionato niente e verosimilmente aprirà il tag, scriverà la frase e lo chiuderà successivamente.

1. Devo controllare che ci sia una selezione attiva. Per farlo verifico che la posizione iniziale del puntatore sia diversa dalla posizione finale. Nel caso in cui l’ipotesi sia vera, al click sul tag inserirò il tag di apertura all’inizio della selezione e quello di chiusura alla fine.

2. Se l’ipotesi 1 non si verifica, allora al click del mouse aprirò semplicemente il tag, scrivendolo nella textarea. Ma non mi limito a questo! Trasfromerò il value del tasto scelto in tag di chiusura (in questo caso ho solo aggiunto uno slash, ma la casistica dipende dagli scopi del webmaster). Chiuso il tag con un ulteriore click, riporto allo stato originario il value del tag clickato.

Applichiamo la funzione al nostro form
Una volta costruita la funzione, inseritela in un file *.js oppure direttamente nel codice html. Vedete un po’ voi in base alle esigenze ed alle preerogative del linguaggio utilizzato quale sia la soluzione migliore.
Dopo di che, dobbiamo applicare la funzione al nostro form. Procederemo come di seguito:

<form name="form" id="SomeID" action="SomeAct" method="GET/POST" >
<div>
<input type="submit" value="strong" id="strong" onClick="return tagging(‘testo’,’strong’)" />
<input type="submit" value="i" id="i" onClick="return tagging(‘testo’,’i’)" />
</div>
<div>
<textarea id="testo" cols="45" rows="15"></textarea>
</div>
</form>

Aiutandoci con un sistema di persing dinamico (PHP, ASP…), potremmo anche riuscire a far generare automaticamente toolbar e relative istruzioni.

Esempio On Line

3 thoughts on “[JavaScript] Inserire tag in form”

Comments are closed.