Logo JsDir.com [niente]
Bring Your Site To Life!!!
24 Luglio 2008 - 7:30:45 - 104 scripters on-line! - La tua posizione nel sito: StaffScripts/Script087/
BedInLecce
StaffScripts
Chars Left in più campi textarea

Autore: Riccardo Data: 05/01/2004 Downloads: 399 Voto: 3,4/5 Download P r o v a


Chars left in più campi TEXTAREA

      Una variazione sul tema, come detto nell'introduzione, suggerita da un amico che aveva bisogno di controllare tre diversi TEXTAREA da cui far partire degli SMS.
      Pur essendo molto simile al vecchio, vediamo come utilizzare il codice:
<HTML>
<HEAD>
<TITLE>http://www.jsdir.com - Chars left in più TEXTAREA</TITLE>
<SCRIPT>
<!--
function CheckLength(txta,chrs,maxchars)
   {
   with (document.modulo)
      {
      var chars=txta.value
      if (chars.length > maxchars)
         {
         txta.value=chars.substr(0,maxchars);
         txta.blur();
         }
      chrs.value=maxchars-txta.value.length;
      }
   }
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff">
<FORM NAME="modulo">
<TABLE BORDER="0" ALIGN="center">
   <TR>
      <TD ALIGN="center" COLSPAN="2">
      <FONT FACE="verdana, arial, helvetica" SIZE="-1">
      Scrivi nella textarea che segue.<BR>
      In quest'esempio sono consentiti solo 10 caratteri nel primo box e 25 nel secondo. <BR>
   </TD>
</TR>
<TR>	
   <TD ALIGN="center">
      <FONT FACE="verdana, arial, helvetica" SIZE="-1">Messaggio 1: <BR>
      <TEXTAREA NAME="testo1" ROWS="5" COLS="30" WRAP="hard" onKeyUp="CheckLength(testo1,chr1,10)"></TEXTAREA>
      </FONT>
   </TD>
   <TD ALIGN="center">
      <FONT FACE="verdana, arial, helvetica" SIZE="-2">
         Chars left: <br><INPUT TYPE="text" NAME="chr1" SIZE="4" onFocus="this.blur()">
      </FONT>
   </TD>
</TR>
<TR>	
   <TD ALIGN="center">
      <FONT FACE="verdana, arial, helvetica" SIZE="-1">Messaggio 2: <BR>
      <TEXTAREA NAME="testo2" ROWS="5" COLS="30" WRAP="hard" onKeyUp="CheckLength(testo2,chr2,25)"></TEXTAREA>
      </FONT>
   </TD>
   <TD ALIGN="center">
      <FONT FACE="verdana, arial, helvetica" SIZE="-2">
         Chars left: <br><INPUT TYPE="text" NAME="chr2" SIZE="4" onFocus="this.blur()">
      </FONT>
   </TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
      La funzione CheckLength() ora accetta in intresso tre parametri: il primo ("txta") fa riferimento alla textarea da controllare, e corrisponde al valore del NAME del campo. Idem per il secondo parametro ("chrs") che invece punta al campo TEXT in cui visualizziamo il numero di caratteri rimanenti.
      L'ultimo parametro ("maxchars") è invece il numero massimo di caratteri consentiti, passato come parametro alla funzione ci consente di avere un numero massimo di caratteri diverso per ogni TEXTAREA.
      La funzione viene invocata ogni volta che rilasciamo un tasto (cioè scriviamo un carattere) nella TEXTAREA, grazie all'event-handler onKeyUp che passa alla funzione il valore dei tre parametri necessari.
      Come nella precedente versione, la funzione confronta il numero attuale di caratteri ed elimina l'ultimo appena inserito al superamento del limite imposto.
      Notare che la prima riga della funzione fa rifermiento all'unico form presente nello script di prova ("<FORM NAME="modulo">"), se i TEXTAREA fossero presenti in più di un modulo converrà modificare la funzione come segue:
function CheckLength(txta,chrs,maxchars)
   {
   if (chars.length > maxchars)
      {
      txta.value=chars.substr(0,maxchars);
      md[txta].blur();
      }
   md[chrs].value=maxchars-md[txta].value.length;
   }
e l'event-handler onKeyUp assumerà questa sintassi: onKeyUp="CheckLength(document.modulo1.testo1,document.modulo1.chr1,10)"
      Cioè alla funzione ora passeremo direttamente l'oggetto TEXTAREA e l'oggetto TEXT su cui lavorerà la funzione (avendo diversi moduli è sparita l'istruzione with (document.modulo)), ed i rifermimenti agli oggetti ("txta" e "chrs") verranno usati direttamente per il controllo dei caratteri.
      Nel file ZIP da scaricare è presente un secondo file d'esempio ("index_multiform.html") che dimostra il funzionamento di questa variante.
      



Per navigare correttamente il sito è necessario abilitare i cookies.
Enjoy Open Source!
ffx80bl2

    javascript
 
 
 
         Stampa
          Segnala
          Preferiti





thb1202