Per esempio nel visualizzare l'input non fa distinzione tra "A=65" e "a=27".
Cosa sto sbagliando?
Ciao Valerio, sbagli ad usare la proprietà keyCode perché questa fa riferimento esattamente al codice Unicode del tasto premuto (non del carattere). Per questo motivo (in riferimento al codice del tasto) non si ha una distinzione tra caratteri minuscoli e maiuscoli, proprio perché si tratta sempre dello stesso tasto.
Per recuperare il codice del carattere (distinguendo quindi maiuscole e minuscole) dovresti piuttosto usare charCode o, meglio ancora, which.
In questo caso dovrai inoltre usare necessariamente l'evento keypress anziché keydown (usato nel tuo esempio).
Tutte queste indicazioni sono riportate nelle relative documentazioni. Consiglio di dare uno sguardo così da apprendere meglio i vari concetti.
premetto che sono ancora principiate con javascript
Capisco e lo noto anche vedendo giusto il tuo script che, non te lo nascondo, è altamente ridondante (segno, appunto, di una cattiva programmazione data generalmente dalla poca esperienza).
Il tuo script può essere certamente ottimizzato e sintetizzato in poche righe.
Posto qui un esempio del tuo stesso script rielaborato, da cui magari puoi prendere spunto:
codice:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>esempio</title>
</head>
<body >
<form action="" method="" name="vform">
<input type="text" id="showText" value="" onkeypress="controlloCarattere(event)" name="mvar" readonly><br>
</form>
<p id="err"></p>
<script>
function controlloCarattere(event) {
var codice = event.which;
var contenitoreErrore = document.getElementById('err');
var campo = vform.mvar;
if ( // Se premuto tasto con codice carattere consentito:
( codice >= 48 && codice <= 57 ) // Numeri
|| ( codice >= 65 && codice <= 90 ) // Lettere maiuscole
|| ( codice >= 97 && codice <= 122 ) // Lettere minuscole
) {
campo.value += String.fromCharCode(codice); // Aggiungo il carattere digitato
} else if ( codice == 8 ) { // Se premuto Backspace
campo.value = campo.value.slice(0, -1); // Rimuovo l'ultimo carattere
} else { // Se premuto un tasto non consentito
// Visualizzo l'errore
contenitoreErrore.innerHTML="carattere non permesso";
setTimeout(function(){ contenitoreErrore.innerHTML="" },1000);
}
}
</script>
</body>
</html>
Chiaramente è possibile ottenere una funzione simile in vari altri modi per ottimizzare maggiormente lo script (ad esempio è possibile usare delle espressioni regolari o un array dei caratteri consentiti) o per permettere tutte le funzionalità di un normale campo di testo; infatti, nel tuo caso, il metodo che stai usando impedisce, ad esempio, l'inserimento con copia-incolla, o limita la cancellazione per il solo ultimo carattere in fondo alla stringa. Ovviamente tutto dipende poi dalle proprie esigenze.
Per il momento penso comunque di aver fornito sufficienti indicazioni per risolvere il problema e per poter approfondire eventualmente l'argomento.
Buon proseguimento e, nel caso, buono studio.
Rispondi quotando
