Controlli su caratteri

Gli argomenti di questa pagina

  • Maiuscolare i caratteri
  • Inserire solo numeri: primo esempio
  • Inserire solo numeri: secondo esempio
  • Inserire solo numeri: terzo esempio
  • Inserire caratteri alfabetici

Maiuscolare i caratteri

Il problema da risolvere è quello del controllo sui caratteri immessi in una area di testo durante la digitazione. L'istruzione JS da usare per ottenere questo risultato è brevissima per cui non occorre aggiungere alcuna funzione personale ma è sufficiente aggiungere l'istruzione nell'onkeyup del controllo TXT.
In una casella di testo contenuta in un Form si desidera maiuscolare il carattere appena inserito intercettando il tasto premuto.
L'evento da usare è "onkeyup" e la funzione JS da usare è "toUpperCase".
La funzione toUpperCase() converte una stringa nella rispettiva stringa in maiuscolo.

1
2
3
4
5
6
7
8
9
 		<form name="ciccio" method="post" action="">
<table>
<tr>
<td>
<input name="il_testo" type="text" size="50" onkeyup="this.value=this.value.toUpperCase()" />
</td>
</tr>
</table>    
</form>

Maiuscolare caratteri alfabetici

Inserire solo numeri: primo esempio

Lo script JS viene così richiamato nella pagina.
Ovviamente lo script è compilato in un file esterno (per esempio isnumberkey.js) e viene richiamato nella pagina in questo modo:

1
 		<script type="text/javascript" src="js/isnumberkey.js"></script>

Questa è una piccola funzione che permette di controllare che in una casella di testo si inseriscano solo numeri.

1
2
3
4
5
6
7
 		function isNumberKey(evt){    
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}
La funzione si richiama in questo modo
1
2
 		<input type="text" name="numeric" maxlength="7" size="50" onkeypress="return isNumberKey(event)" />

Qui sotto c'è un esempio del form in cui è possibile inserire solo numeri. Gli altri caratteri sono ignorati. Le cifre inseribili sono sette (maxlength="7")

1
2
3
4
5
6
7
8
9
 		<form name="numeri" method="post" action="">
<table>
<tr>
<td>
<input type="text" name="numeric" maxlength="7" size="50" onkeypress="return isNumberKey(event)" />
</td>
</tr>
</table>    
</form>

Prova inserimento caratteri numerici per il primo esempio

Inserire solo numeri: secondo esempio

Lo script JS viene così richiamato nella pagina.
Ovviamente lo script è compilato in un file esterno (per esempio control_numberic_field.js) e viene richiamato nella pagina in questo modo:

1
 		<script type="text/javascript" src="js/control_numberic_field.js"></script>

Questa è una piccola funzione che permette di controllare che in una casella di testo si inseriscano solo numeri, ma questa volta è possibile usare anche il punto come carattere separatore tra le cifre.

1
2
3
4
5
6
7
8
9
 		function control_numberic_field(campo,tipo) {
    var lunghezza = campo.value.length;
    var codascii=campo.value.charCodeAt(lunghezza -1);
    if ( codascii==46 || ( codascii>=48 && codascii<=57)) {
        return true;
    } else {
        document.getElementById(tipo).value=campo.value.substr(0,lunghezza -1);
    }
}
La funzione si richiama in questo modo
1
 		<input id="numero" onkeyup="return(control_numberic_field(this,this.name))" name="numero" type="text" />

Qui sotto c'è un esempio del form in cui è possibile inserire solo numeri. Gli altri caratteri, ad eccezione del punto, sono ignorati.

1
2
3
4
5
6
7
8
9
 		<form name="number_only" method="post" action="">
<table>
<tr>
<td>
<input id="numero" onkeyup="return(control_numberic_field(this,this.name))" name="numero" type="text" />
</td>
</tr>
</table>    
</form>

Prova inserimento caratteri numerici per il secondo esempio

Inserire solo numeri: terzo esempio

Lo script JS viene così richiamato nella pagina.
Ovviamente lo script è compilato in un file esterno (per esempio numeric.js) e viene richiamato nella pagina in questo modo:

1
 		<script type="text/javascript" src="js/numeric.js"></script>

In questo terzo esempio il controllo viene eseguito tramite una espressione regolare che, oltre ad accettare i caratteri esclusivamente numerici, permette anche l'inserimento di alcuni altri caratteri.

1
2
3
4
5
6
7
8
9
10
11
 		function numeric(champ) {
    var chiffres = new RegExp("[0-9., \'-]");
    var verif;
    var points = 0; /* Supprimer cette ligne */
    for(x = 0; x < champ.value.length; x++) {
        verif = chiffres.test(champ.value.charAt(x));
        if(champ.value.charAt(x) == "."){points++;} /* Supprimer cette ligne */
        if(points > 1){verif = false; points = 1;} /* Supprimer cette ligne */
        if(verif == false){champ.value = champ.value.substr(0,x) + champ.value.substr(x+1,champ.value.length-x+1); x--;}
    }
}
La funzione si richiama in questo modo
1
 		<input type="text" name="numbers" size="50" onkeyup="return numeric(this)" />

Qui sotto c'è un esempio del form in cui è possibile inserire solo numeri. Gli altri caratteri, ad eccezione del punto, sono ignorati.

1
2
3
4
5
6
7
8
9
 		<form name="numerici" method="post" action="">
<table>
<tr>
<td>
<input type="text" name="numbers" size="50" onkeyup="return numeric(this)" />
</td>
</tr>
</table>    
</form>

Prova inserimento caratteri numerici per il terzo esempio

Inserire caratteri alfabetici

Lo script JS viene così richiamato nella pagina.
Ovviamente lo script è compilato in un file esterno (per esempio control_numberic_field.js) e viene richiamato nella pagina in questo modo:

1
 		<script type="text/javascript" src="js/alfabetic.js"></script>

E' questa un'altra funzione per il controllo dell'inserimento di caratteri in una casella di testo. Questa volta vogliamo controllare che vengano inseriti solo caratteri alfabetici.
Questa volta facciamo uso di una espressione regolare che fa in modo da accettare tutti i caratteri alfabetici, punti, virgole, spazi, apici semplici e le vocali accentate. Il problema in questo caso è come fare in modo di fargli riconoscere le vocali accentate. Sfortunatamente la sequenza " \é\è\ò\à\ù\ì " non viene riconosciuta per cui è stato necessario usare le sequenze unicode " \u00E0\u00E8\u00EC\u00F2\u00F9 ". Grazie a questa sequenza è possibile trattare anche le vocali accentate.
La sequenza completa si è così trasformata in " [a-zA-Z\., \'\u00E0\u00E8\u00EC\u00F2\u00F9] ".

1
2
3
4
5
6
7
8
9
10
11
 		function alfabetic(champ) {
    var chiffres = new RegExp("[a-zA-Z\., \'\u00E0\u00E8\u00EC\u00F2\u00F9]"); /* Modifier pour : var chiffres = new RegExp("[0-9]"); */
    var verif;
    var points = 0; /* Supprimer cette ligne */
    for(x = 0; x < champ.value.length; x++) {
        verif = chiffres.test(champ.value.charAt(x));
        if(champ.value.charAt(x) == "."){points++;} /* Supprimer cette ligne */
        if(points > 1){verif = false; points = 1;} /* Supprimer cette ligne */
        if(verif == false){champ.value = champ.value.substr(0,x) + champ.value.substr(x+1,champ.value.length-x+1); x--;}
    }
}
La funzione si richiama in questo modo
1
 		<input type="text" name="alfabetic" size="50" onkeyup="return alfabetic(this)" /> 

Qui sotto c'è un esempio del form in cui è possibile inserire solo numeri. Gli altri caratteri sono ignorati. Le cifre inseribili sono sette (maxlength="7")

1
2
3
4
5
6
7
8
9
 		<form name="alfa" method="post" action="">
<table>
<tr>
<td>
<input type="text" name="testo" size="50" onkeyup="return alfabetic(this)" />
</td>
</tr>
</table>    
</form>

Prova inserimento caratteri alfabetici

 

 



settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum