Permettere solo una selezione di caratteri un una input text

**fermat** · 25-01-2022, 17:17

ciao!

mi hanno chiesto di impostare che una input text possa accettare solo questi caratteri:

tutte le lettere maiuscole
tutte le lettere minuscole
lettere accentate
spazio
apostrofo

e quindi escludere:

tutti i numeri
tutti gli altri caratteri speciali

secondo voi come posso fare??

l'unica soluzione che mi è venuta in mente al momento è controllare il carattere premuto e confrontarlo con il char code ascii.
ma non so se è la soluzione migliore.

**optime** · 25-01-2022, 17:54

butta un occhio qui https://jsfiddle.net/xfEEu/2/

**alka** · 25-01-2022, 17:54

Le implementazioni possibili sono abbastanza semplici da realizzare: prova a prendere spunto da questi esempi.

Ciao!

**fermat** · 25-01-2022, 18:10

grazie a entrambi!

me li spulcio subito e vi faccio sapere!

**ninja72** · 25-01-2022, 19:06

Non ho avuto modo di testare bene la cosa, facci sapere ciao.

codice:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <input type="text" id="testo" />
        <div id="result"></div>

        <script>
            const mytext = document.getElementById("testo")
            const result = document.getElementById("result")

            mytext.addEventListener("input", (e) => {
                const myRexp = new RegExp(/^[a-z\'\s\àèìòù]{3,}$/, "gi")
                if (myRexp.test(e.target.value)) {
                    result.textContent = "valido"
                } else {
                    result.textContent =
                        "non valido, (regexp con minimo 3 caratteri)"
                }
            })
        </script>
    </body>
</html>

**fermat** · 26-01-2022, 17:00

ciao!

al momento mi sta funzionando solo questa soluzione:

codice:

<input type="text" value="" onkeydown="return checkChar(event);">

<script>
    function checkChar(evt) {
        const permessi = Array(65, 32, 39, 127, 8);
        const charCode = (evt.which) ? evt.which : event.keyCode;
        if (!permessi.includes(charCode)) {
            return false;
        }
        return true;
    }
</script>

solo che:

mi dice che event è deprecato
ho dovuto mettere anche i "decimal" per il backspace e canc
ovviamente li devo mettere tutti uno per uno nell'array
i caratteri accentati non mi funzionano (è,é,à dovrei averli messi corretti nell'array)
mi prende sia A che a, anche se hanno valori diversi

**fermat** · 27-01-2022, 09:54

ho testato il char code dei caratteri e li ho messi nell'array.

questo sembrerebbe funzionare:

codice:

<input type="text" value="" onkeydown="return checkChar(event);">

<script>
    function checkChar(evt) {
        const permessi = Array(
            8, 32, 39, 46, 59, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77,
            78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 222
        );
        const charCode = (evt.which) ? evt.which : evt.keyCode;
        console.log(charCode);
        if (!permessi.includes(charCode)) {
            return false;
        }
        return true;
    }
</script>

**fermat** · 27-01-2022, 11:32

alla fine ho fatto così:

codice:

checkChar(evt) {
    const permessi = Array();
    const alphabet = 'abcdefghijklmnopqrstuvwxyz';
    for (let i = 0; i < alphabet.length; i++) {
        permessi.push(alphabet.charAt(i));
        permessi.push(alphabet.charAt(i).toUpperCase());
    }
    permessi.push(' ', 'é', 'è', 'ò', 'ù', 'à', 'Backspace', 'ArrowRight', 'ArrowLeft', 'Delete', '\'');
    if (!permessi.includes(evt.key)) {
        return false;
    }
    return true;
}

ho usato evt.key che non è deprecato.
ed ho costruito l'array permessi in quella maniera.
mi sembra un pò più funzionale.

**KillerWorm** · 27-01-2022, 19:34

Originariamente inviata da fermat

alla fine ho fatto così:
[...]
ho usato evt.key che non è deprecato.
ed ho costruito l'array permessi in quella maniera.
mi sembra un pò più funzionale.

Ciao, il tuo sistema non impedisce però di eseguire dei copia-incolla in cui il testo presenta dei caratteri non consentiti.

Ad esempio se copio questo testo ~.Ʈ¡.ßŷþ@$$ø.¡|.©øŋŧ®ö££°.~ e lo incollo nel tuo campo input, sarà perfettamente accettato nonostante tutti i caratteri risultino vietati dal tuo sistema.

Ora, questo magari può essere un esempio eccessivo ma, non avendo tu chiarito il contesto, posso pensare che si tratti di un qualche campo "Nome Cognome", per cui non è da escludere il copia-incolla (magari copiando direttamente da altre fonti) in cui magari il dato presenta caratteri non consentiti.

Esempi:
Thomas Müller
M. Lucia Curri
(Pippo Baudo)
"Pinco Pallo"
Mario - Rossi

A questo punto è facile che qualche carattere sfugga al controllo.

Non è chiaro poi se per le lettere accentate vuoi che siano ammesse solo quelle minuscole (àèéìòù) oppure anche le maiuscole (ÀÈÉÌÒÙ).

Se, ad esempio, facessi un copia incolla di MARIO CALÒ, dove tutte le lettere sono maiuscole compresa l'ultima che è una "o" accentata, come dovrebbe comportarsi il sistema?

Nel tuo ultimo esempio noto che nell'array permessi hai anche omesso la "ì" (i accentata).
E' stata una tua dimenticanza o c'è qualche motivo valido?

Ad ogni modo, personalmente un sistema più funzionale lo vedrei impostando un evento input - che attualmente copre tutti i vari tipi di azione per l'immissione del dato nel campo; o tutt'al più un evento change, che viene eseguito una volta usciti dal campo - e usando un replace con una espressione regolare che rimuova i caratteri non consentiti, cioè quelli non compresi in una classe di caratteri specifici.

Qui un semplice esempio:

codice HTML:

<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
   </head>
   <body>
      <input id="inpFoo" value="">
      <script>
         const inp = document.getElementById('inpFoo');
         inp.addEventListener('input', controllaECorreggi)
         
         function controllaECorreggi(){
            this.value = this.value.replace(/[^a-z 'àèéìòù]/gi, '');
         }
      </script>
  </body>
</html>

Sono rimossi tutti i caratteri diversi da quelli specificati dentro la classe [^...]
Il flag "i" (case insensitive) significa che non c'è distinzione tra minuscole e maiuscole, per cui sono ammessi i caratteri "a" e "A", così come "à" e "À".

Se vuoi distinzione tra minuscole e maiuscole, ad esempio per amettere "à" ma non "À", usa invece Queso:

codice:

this.value = this.value.replace(/[^a-zA-Z 'àèéìòù]/g, '');

.
Inoltre, se si tratta di un regolare form web, inutile dirti che lo stesso controllo andrà ovviamente eseguito anche lato server.

Se hai bisogno di ulteriori chiarimenti chiedi pure.
Fai sapere se può andare.
Buon proseguimento

**fermat** · 28-01-2022, 10:19

ciao!

per quanto riguarda il copia e incolla hai ragione.
ma in questo caso si tratta di uno schermo che verrà messo in modalità kiosk.
quindi non possono copiare e incollare quei caratteri.
a meno che non li mettano in un'altra input text, però siamo ai limiti della follia

.

la ì è una mia dimenticanza, grazie di avermelo segnalato!
cmq provo al più presto la tua soluzione e ti dico!

Discussione: Permettere solo una selezione di caratteri un una input text

Strumenti discussione

Ricerca discussione

Visualizza

Permettere solo una selezione di caratteri un una input text

Permessi di invio