Home HTML Limita input HTML per consentire solo valori numerici

Limita input HTML per consentire solo valori numerici

211
0

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');" />
    
Previous articleIncrementare upload_max_filesize nel tuo WordPress
Next articleInserire shortcode direttamente nel codice php con WP

LEAVE A REPLY

Please enter your comment!
Please enter your name here