Visualizzazione dei risultati da 1 a 5 su 5

Discussione: Simulare Tastiera con javascritp

  1. #1

    Simulare Tastiera con javascritp

    Salve a tutti mi chiamo Valerio, premetto che sono ancora principiate con javascript, sto provando a simulare una tastiera con js per vincolare i caratteri che si possono inserire in campo input di un form.

    Con il codice fin'ora creato sono riuscito a vincolare l'inserimento di caratteri alfanumerici e in caso contrario mostrare un messaggio di errore.

    Il codice funziona andando ad inserire con js i caratterri una volta digitati sulla tastiera bypassando l'inserimento diretto con il comando <input ........ readonly/>.

    Il problema consiste che nel digitare le lettere in modo maiuscolo o minuscolo lo script mi visualizza solo lettere maiuscole. Per esempio nel visualizzare l'input non fa distinzione tra "A=65" e "a=27".

    Cosa sto sbagliando?

    Di seguito il link jsfiddle con lo script.

    https://jsfiddle.net/qvc7vdp4/

    Grazie Ciao

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    3,982
    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.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    3,982
    Aggiornamento:
    l proprietà .which attualmente risulta deprecata https://caniuse.com/#feat=keyboardevent-which
    Anche se è comunque supportata dalla maggior parte dei browser effettivamente in divrsi browser sembra funzionare in modi differenti.
    Ho notato ad esempio che con quello script si hanno dei malfunzionamenti usando CH o IE.

    In questo caso, a mio parere, dovresti separare il controllo tra i caratteri stampabili, che puoi verificare attraverso l'evento keypress e la proprietà charCode, e quelli non stampabili, che puoi controllare attraverso l'evento keydown e la proprietà keyCode.

    Qui un esempio aggiornato:
    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)" onkeydown="controlloTasto(event)"  name="mvar" readonly><br>
          </form>
          <p id="err"></p>
          <script>
             var contenitoreErrore = document.getElementById('err');
             var campo = vform.mvar;
             
             function controlloCarattere(event) {
                var codice = event.charCode;
    
                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 {                                        // Se premuto un tasto non consentito
                                                                // Visualizzo l'errore
                   contenitoreErrore.innerHTML="carattere non permesso";
                   setTimeout(function(){ contenitoreErrore.innerHTML="" },1000);
    
                }
             }
             function controlloTasto(event) {
                var codice = event.keyCode;
                
                if ( codice == 8 ) {                            // Se premuto Backspace
                   campo.value = campo.value.slice(0, -1);      // Rimuovo l'ultimo carattere
                }
             }
          </script>
       </body>
    </html>
    Vedi se può andare.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  4. #4
    Grazie mille per le tue celeri risposte e l'interessamento , oltre ad avermi aiutato a risolvere il problema mi hai chiarito anche come utilizzare il comando if con condizioni multiple, avevo provato una cosa simile per la selezione dei caratteri utilizzabili ma sbagliavo completamente la sinstassi , e inoltre mi hai fatto scoprire il sito mozzila developer per ora principalmente utilizzavo w3c school.
    Per ora l'ho provato su firefox e chrome e funziona correttamente.
    Ora mi metto a guardare ogni stringa del tuo codice per cercare di capire pienamente la logica e i comandi utilizzati in questo script.

    Ciao grazie per l'aiuto e buona serata.

  5. #5
    Grazie mille per le tue celeri risposte e l'interessamento , oltre ad avermi aiutato a risolvere il problema mi hai chiarito anche come utilizzare il comando if con condizioni multiple, avevo provato una cosa simile per la selezione dei caratteri utilizzabili ma sbagliavo completamente la sinstassi , e inoltre mi hai fatto scoprire il sito mozzila developer per ora principalmente utilizzavo w3c school.
    Per ora l'ho provato su firefox e chrome e funziona correttamente.
    Ora mi metto a guardare ogni stringa del tuo codice per cercare di capire pienamente la logica e i comandi utilizzati in questo script.

    Ciao grazie per l'aiuto e buona serata.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.