Impedire scrittura testo in un input

**Ufotizio** · 06-05-2009, 12:24

Salve a tutti,

ho cercato nel forum ma non ho trovato la soluzione al problema che mi si è presentato, problematica che sicuramente è stata già affrontata

Ho un form da compilare nel quale, nei vari input, bisogna scrivere soltanto numeri, e non testo. Esiste una funzione che impedisce la scrittura di caratteri di testo, o che piu semplicemente permette solo di digitare i numeri da 0 a 9?

Spero di essermi spiegato! ciao e grazie!

**artorius** · 06-05-2009, 12:42

basta che metti l'attributo readonly="readonly" all'input:

codice:

<input id="MyReadonlyInput" type="text" value="You cannot type here..." readonly="readonly" name="readonly-input" />

Programmaticamente in js puoi alterare la proprietà con:

codice:

//Aggiunge readonly all'input il cui id è passato
var setReadonly = function(id){
   document.getElementById(id).setAttribute('readonly', 'readonly');
}
//Rimuove readonly all'input il cui id è passato
var removeReadonly = function(id){
   document.getElementById(id).removeAttribute('readonly');
}

//Cambia il readonly in base a quello attuale: se c'è lo toglie, altrimenti lo mette
var toogleReadonly = function(id){
   if(document.getElementById(id).readonly)
       removeReadonly(id);
   else
       setReadonly(id);
}

Basta che chiami setReadonly("MyReadonlyInput") per impostare il readonly, o removeReadonly("MyReadonlyInput") per rimuoverlo, oppure toogleReadonly("MyReadonlyInput") per cambiare quello attuale

**Ufotizio** · 06-05-2009, 12:44

mmmmh no... non mi serve il "readonly", mi serve che non posso scrivere testo, ma i numeri si

per fare un esempio, il campo si chiama "Numero Persone", quindi devo scrivere solo numeri e non testo. Quello che mi piacerebbe e che nel momento in cui scrivo una lettera, lui me lo impedisce e non scrive nulla.

**PaoloIT** · 06-05-2009, 12:48

Puoi usare la regexp //^[0-9]+$// con un match sul valore dell'input durante la digitazione.
Meglio ancora se lo fai sul keyCode dell'evento onkeypressed.

**Ufotizio** · 06-05-2009, 12:51

non sono proprio un veterano del javascript... potresti farmi un esempio oppure darmi un link esplicativo?

**fcaldera** · 06-05-2009, 12:52

con readonly si impedisce l'immissione di qualsiasi testo, anche dei numeri

per consentire le solo cifre puoi controllare un evento come keydown applicato all'input,
ad esempio in jQuery

codice:

var editingKeys = {
   '8'  : 'backspace',
   '46' : 'canc',
   '37' : 'leftarrow',
   '39' : 'rightarrow'
};

$('#iddeltuoinput').bind('keydown', function(e) {
   var key = e.keyCode;
   var keynum = (key > 47) && (key < 58);   
   var keypad  = (key > 95) && (key < 106);  // tastiera numerica
   if (!keynum && !keypad) {
       return (key in editingKeys);
   }
});

Ciao

**Ufotizio** · 06-05-2009, 13:52

scusa fcaldera, non riesco a capire come relazione questo script al form

**fcaldera** · 06-05-2009, 14:14

Originariamente inviato da Ufotizio
scusa fcaldera, non riesco a capire come relazione questo script al form

copia e incolla

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>input numerico</title>
        
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
      $(document).ready(function() {

        (function() {
            var editingKeys = {
               '8'  : 'backspace',
               '46' : 'canc',
               '37' : 'leftarrow',
               '39' : 'rightarrow'
            };

            $('#inputid').bind('keydown', function(e) {
               var key = e.keyCode;
               var keynum = (key > 47) && (key < 58);
               var keypad  = (key > 95) && (key < 106);  // tastiera numerica
               if (!keynum && !keypad) {
                   return (key in editingKeys);
               }
            });
        })();

      });
    </script>
    </head>

<body>

    <input type="text" maxlength="10" id="inputid" />

</body>
</html>

**Ufotizio** · 06-05-2009, 14:24

non ho parole!

VVoVe:
grazie! funziona alla perfezione

ciao!

**fcaldera** · 08-05-2009, 11:45

Giusto per renderlo meno indipendente dai codici ascii si potrebbe semplificarlo così

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>input numerico</title>
        
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
      $(document).ready(function() {

        (function() {
            var editingKeys = {
               '8'  : 'backspace',
               '46' : 'canc',
               '37' : 'leftarrow',
               '39' : 'rightarrow'
            };

            $('#inputid').bind('keydown', function(e) {
                var key = String.fromCharCode(e.keyCode);
                if (isNaN(key)) return (e.keyCode in editingKeys);
            });
        })();

      });
    </script>
    </head>

<body>

    <input type="text" maxlength="10" id="inputid" />

</body>
</html>

Ciao

Discussione: Impedire scrittura testo in un input

Strumenti discussione

Ricerca discussione

Visualizza

Impedire scrittura testo in un input

Permessi di invio