Limita input HTML per consentire solo valori numerici

Questo post discuterà come limitare una casella di testo di input HTML per consentire solo valori numerici e lo faremo in tre modi.

1. Utilizzo

   Questa e’ la soluzione che limitare un utente a immettere solo valori numerici elementi di tipo numero (type=”number”). Ha una convalida (submit) incorporata per rifiutare valori non numerici. come esempio:

   <label for="salary">Enter your salary:</label>
   <input type="number" id="salary" name="salary">
   

2. Utilizzo pattern attributo

   In alternativa, puoi utilizzare il attributo del modello per specificare un’espressione regolare che dovrebbe corrispondere all’input fornito.
   
   L’utilizzo dell’attributo pattern è illustrato di seguito. Se i valori contengono caratteri non numerici, l’elemento corrisponde a :invalid Pseudo-classi CSS.

   <label for="salary">Enter your salary:</label>
   <input type="number" id="salary" name="salary">
   

   input:invalid {
       border: 3px solid red;
   }
   

3. Utilizzo oninput evento

   Un’altra soluzione è usare il oninput proprietà per elaborare gli eventi di input sulla elementi. Per limitare l’utente a inserire solo valori numerici, puoi fare come:

   <label for="salary">Enter your salary:</label>
   <input type="text" id="salary" name="salary"
       oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />