Question La saisie de texte HTML autorise uniquement l'entrée numérique


Existe-t-il un moyen rapide de définir une entrée de texte HTML (<input type=text />) pour autoriser uniquement les frappes numériques (plus ".")?


642
2018-03-03 18:05


origine


Réponses:


JavaScript (le plus fiable encore)

Bien que ce soit simple, il ne vous permettra pas d'utiliser des combinaisons de touches et d'autres touches non typables. Pour une solution JavaScript complète qui prend également en charge la saisie du nombre de type et la validation de longueur maximale, envisagez d'utiliser ce Polyfill.

HTML 5  avec <!DOCTYPE html> a solution native:

<input type="number">

Méfiez-vous qu'il ne se comporte pas de manière standard dans certains navigateurs.

Essayer type d'entrée = numéro pour voir la version HTML5 en action.

Voir également https://github.com/jonstipe/number-polyfill pour un support transparent dans les anciens navigateurs.

jQuery

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
             // Allow: Ctrl/cmd+A
            (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: Ctrl/cmd+C
            (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: Ctrl/cmd+X
            (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});

Options de validation plus complexes

Si vous voulez faire d'autres bits de validation, cela pourrait être utile:

http://www.javascript-coder.com/html-form/javascript-form-validation.phtml https://github.com/lockevn/html-numeric-input

Mais ne t'oublie pas encore doit faire la validation côté serveur!

pour le clavier AZERTY:

jQuery

// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
    // Allow: Ctrl+A
    (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
    // Allow: Ctrl+C
    (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
    // Allow: Ctrl+X
    (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
    // Allow: home, end, left, right
    (e.keyCode >= 35 && e.keyCode <= 39) ||
    //Allow numbers and numbers + shift key
    ((e.shiftKey && (e.keyCode >= 48 && e.keyCode <= 57)) || (e.keyCode >= 96 && e.keyCode <= 105))) {
    // let it happen, don't do anything
    return;
}
// Ensure that it is a number and stop the keypress
if ((!e.shiftKey && (e.keyCode < 48 || e.keyCode > 57)) || (e.keyCode < 96 || e.keyCode > 105)) {
    e.preventDefault();
}

898



Utilisez ce DOM

<input type='text' onkeypress='validate(event)' />

Et ce script

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

234



J'ai cherché longtemps et dur pour une bonne réponse à cela, et nous avons désespérément besoin <input type="number", mais à court de cela, ces 2 sont les moyens les plus concis que je pourrais trouver:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

Si vous n'aimez pas le caractère non accepté affiché pendant une fraction de seconde avant d'être effacé, la méthode ci-dessous est ma solution. Notez les nombreuses conditions supplémentaires, ceci pour éviter de désactiver toutes sortes de navigation et de raccourcis clavier. Si quelqu'un sait comment compactify cela, laissez-nous savoir!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

110



Et un autre exemple, qui fonctionne bien pour moi:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

Aussi attacher à l'événement keypress

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

Et HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

Voici un exemple de jsFiddle


49



HTML5 a <input type=number>, qui sonne bien pour vous. Actuellement, seul Opera supporte nativement, mais il y a un projet qui a une implémentation JavaScript.


46



La plupart des réponses ont toutes la faiblesse d'utiliser des événements-clés.

Beaucoup de réponses limiteraient votre capacité à faire du texte avec des macros de clavier, copier + coller et plus de comportement indésirable, d'autres semblent dépendre de plugins jQuery spécifiques, ce qui tue les mouches avec des mitraillettes.

Cette solution simple semble fonctionner le mieux pour moi cross plate-forme, quel que soit le mécanisme d'entrée (frappe, copier + coller, copier-coller + clic droit, discours-texte etc.). Toutes les macros de clavier de sélection de texte fonctionneraient toujours, et cela limiterait même la capacité de chaque utilisateur à définir une valeur non numérique par script.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

37



J'ai choisi d'utiliser une combinaison des deux réponses mentionnées ici.

<input type="number" />

et

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

<input type="text" onkeypress="return isNumberKey(event);">


36