Comment puis-je limiter les entrées possibles dans un élément "nombre" HTML5?

pour <input type="number"> élément, maxlength ne fonctionne pas. Comment puis-je restreindre le maxlength pour cet élément de numéro?

276
demandé sur Pekka 웃 2011-12-02 14:33:03

22 réponses

et vous pouvez ajouter un attribut max qui spécifiera le nombre le plus élevé possible que vous pouvez insérer

<input type="number" max="999" />

si vous ajoutez à la fois une valeur max et une valeur min , vous pouvez spécifier l'intervalle de valeurs autorisées:

<input type="number" min="1" max="999" />

ce qui précède empêchera toujours et non un utilisateur d'entrer manuellement une valeur en dehors de la plage spécifiée. Au lieu de cela, il sera affiché un popup lui disant d'entrer un valeur dans cette plage lors de la soumission du formulaire comme montré dans cette capture d'écran:

enter image description here

257
répondu Cyclonecode 2016-06-16 07:35:21

vous pouvez spécifier les attributs min et max , qui ne permettront l'entrée que dans une plage spécifique.

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

cela ne fonctionne toutefois que pour les boutons de commande de la broche. Bien que l'utilisateur puisse être en mesure de taper un nombre supérieur au max autorisé , le formulaire ne sera pas soumis.

Chrome's validation message for numbers greater than the max

capture d'écran tirée de Chrome 15

vous can utilisez L'événement HTML5 oninput en JavaScript pour limiter le nombre de caractères:

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}
90
répondu Andy E 2015-06-11 01:06:28

si vous recherchez une solution Mobile Web dans laquelle vous souhaitez que votre utilisateur voit un pavé numérique plutôt qu'un clavier plein texte. Utiliser type="tel". Il fonctionnera avec maxlength qui vous évite de créer du javascript supplémentaire.

Max et Min permettra toujours à l'utilisateur de saisir des nombres supérieurs à max et min, ce qui n'est pas optimal.

73
répondu Duane 2013-10-09 16:48:49

vous pouvez combiner tous ceux-ci comme ceci:

<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />

<script>
  // This is an old version, for a more recent version look at
  // https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
  function maxLengthCheck(object)
  {
    if (object.value.length > object.maxLength)
      object.value = object.value.slice(0, object.maxLength)
  }
</script>



mise à jour:

vous pourriez aussi vouloir empêcher tout caractère non-numérique à entrer, parce que object.length serait une chaîne vide pour les entrées de nombre, et donc sa longueur serait 0 . Ainsi, la fonction maxLengthCheck ne fonctionnera pas.

Solution:

Voir ce ou ce pour des exemples.

Demo - voir la version complète du code ici:

http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

Maj 2: voici le code de mise à jour: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

Maj 3: S'il vous plaît noter que permettre plus d'un point décimal pour être entré peut gâcher avec la valeur numérique.

57
répondu DRS David Soft 2017-05-23 11:47:29

c'est très simple, avec un peu de javascript vous pouvez simuler un maxlength , Vérifiez:

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
18
répondu Maycow Moura 2015-11-18 22:08:45

Ou si votre valeur max est, par exemple, 99 et minimum de 0, vous pouvez l'ajouter à l'élément d'entrée (votre valeur sera entièrement réécrites par votre valeur max etc.)

<input type="number" min="0" max="99" 
   onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

, Puis (si vous voulez), vous pouvez vérifier si l'entrée est vraiment numéro de

14
répondu Richard 2014-10-01 15:33:49

vous pouvez le spécifier en tant que texte, mais ajouter pettern, qui correspondent aux numéros seulement:

<input type="text" pattern="\d*" maxlength="2">

il fonctionne parfaitement et aussi sur mobile ( testé sur iOS 8 et Android ) sort le clavier numérique.

12
répondu Христо Панайотов 2015-05-21 08:53:26

//For Angular I have attached following snippet.
<div ng-app="">
  <form>
    Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0">
  </form>
  <h1>You entered: {{number}}</h1>
</div>

si vous utilisez l'événement" onkeypress " alors vous n'obtiendrez aucune limitation d'utilisateur en tant que tel lors du développement ( unit test it). Et si vous avez l'exigence qui ne permet pas à l'utilisateur d'entrer après une limite particulière, jetez un oeil à ce code et essayez une fois.

11
répondu Prasad Shinde 2017-05-02 02:39:26

la réponse de Maycow Moura était un bon début. Cependant, sa solution signifie que lorsque vous entrez le deuxième chiffre tous les outils d'édition du champ s'arrête. Vous ne pouvez donc pas changer les valeurs ou supprimer des caractères.

le code suivant s'arrête à 2, mais permet l'édition de continuer;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
6
répondu Tim Wright 2014-07-24 19:55:09

la longueur maximale ne fonctionnera pas avec <input type="number" la meilleure façon que je connaisse est d'utiliser oninput événement pour limiter la longueur maximale. Veuillez consulter le code ci-dessous pour une mise en œuvre simple.

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />
6
répondu Neha Jain 2016-01-08 08:32:24

j'ai eu ce problème avant et je l'ai résolu en utilisant une combinaison de HTML5 type de numéro et jQuery.

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

script:

$("input[name='minutes']").on('keyup keypress blur change', function(e) {
    //return false if not 0-9
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }else{
        //limit length but allow backspace so that you can still delete the numbers.
        if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
            return false;
        }
    }
});

Je ne sais pas si les événements sont un peu exagérés mais ça a résolu mon problème. JSfiddle

5
répondu tiltdown 2014-12-09 13:37:00

comme l'ont déclaré d'autres, min/max n'est pas la même chose que maxlength parce que les gens pourraient quand même entrer dans un flotteur qui serait plus grand que la longueur de chaîne maximale que vous vouliez. Pour réellement suivre l'attribut maxlength, vous pouvez faire quelque chose comme cela dans un pincement (c'est l'équivalent de maxlength="16"):

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
5
répondu thdoan 2015-01-21 02:59:18

une autre option est d'ajouter simplement un auditeur pour tout ce qui a l'attribut maxlength et d'ajouter la valeur de tranche à cela. En supposant que l'utilisateur ne veut pas utiliser une fonction à l'intérieur de chaque événement lié à l'entrée. Voici un extrait de code. Ignorez le code CSS et HTML, le JavaScript est ce qui importe.

// Reusable Function to Enforce MaxLength
function enforce_maxlength(event) {
  var t = event.target;
  if (t.hasAttribute('maxlength')) {
    t.value = t.value.slice(0, t.getAttribute('maxlength'));
  }
}

// Global Listener for anything with an maxlength attribute.
// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);
label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }
<label for="test_input">Text Input</label>
<input id="test_input" type="text" maxlength="5"/>
<span>set to 5 maxlength</span>

<br>

<label for="test_input">Number Input</label>
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>
<span>set to 2 maxlength, min 0 and max 99</span>
5
répondu Brandon Buttars 2017-03-29 22:50:36

comme avec type="number" , vous spécifiez une propriété max au lieu de maxlength , qui est le nombre maximum possible. Donc avec 4 chiffres, max devrait être 9999 , 5 chiffres 99999 et ainsi de suite.

aussi si vous voulez vous assurer qu'il est un nombre positif, vous pouvez mettre min="0" , assurant des nombres positifs.

3
répondu Jan Dragsbaek 2011-12-02 10:38:28

vous pouvez essayer cela aussi bien pour l'entrée numérique avec restriction de longueur

<input type="tel" maxlength="3" />
3
répondu shinobi 2014-11-19 10:04:57

entrée HTML

 <input class="minutesInput" type="number" min="10" max="120" value="" />

jQuery

 $(".minutesInput").on('keyup keypress blur change', function(e) {

    if($(this).val() > 120){
      $(this).val('120');
      return false;
    }

  });
2
répondu Hector 2017-09-28 23:21:29

la façon simple de définir maxlength pour les entrées de nombre est:

<input type="number" onkeypress="if(this.value.length>=4) { return false;}" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />
2
répondu HexboY 2018-05-15 08:57:01

je sais qu'il y a déjà une réponse, mais si vous voulez que votre entrée se comporte exactement comme l'attribut maxlength ou aussi proche que vous le pouvez, utilisez le code suivant:

(function($) {
 methods = {
    /*
     * addMax will take the applied element and add a javascript behavior
     * that will set the max length
     */
    addMax: function() {
        // set variables
        var
            maxlAttr = $(this).attr("maxlength"),
            maxAttR = $(this).attr("max"),
            x = 0,
            max = "";

        // If the element has maxlength apply the code.
        if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {

            // create a max equivelant
            if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
                while (x < maxlAttr) {
                    max += "9";
                    x++;
                }
              maxAttR = max;
            }

            // Permissible Keys that can be used while the input has reached maxlength
            var keys = [
                8, // backspace
                9, // tab
                13, // enter
                46, // delete
                37, 39, 38, 40 // arrow keys<^>v
            ]

            // Apply changes to element
            $(this)
                .attr("max", maxAttR) //add existing max or new max
                .keydown(function(event) {
                    // restrict key press on length reached unless key being used is in keys array or there is highlighted text
                    if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
                });;
        }
    },
    /*
     * isTextSelected returns true if there is a selection on the page. 
     * This is so that if the user selects text and then presses a number
     * it will behave as normal by replacing the selection with the value
     * of the key pressed.
     */
    isTextSelected: function() {
       // set text variable
        text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return (text.length > 0);
    }
};

$.maxlengthNumber = function(){
     // Get all number inputs that have maxlength
     methods.addMax.call($("input[type=number]"));
 }

})($)

// Apply it:
$.maxlengthNumber();
1
répondu Philll_t 2015-03-19 22:13:12

comme je l'ai découvert, vous ne pouvez utiliser aucun des événements onkeydown , onkeypress ou onkeyup pour une solution complète incluant les navigateurs mobiles. D'ailleurs onkeypress est déprécié et n'est plus présent dans chrome / opera pour android (voir: événements UI W3C Working Draft, 04 August 2016 ).

j'ai trouvé une solution en utilisant l'événement oninput seulement. Vous pouvez avoir à faire des vérifications supplémentaires de nombre comme requis tels que signe négatif / positif ou décimal et mille séparateurs et similaires, mais comme point de départ, les éléments suivants devraient suffire:

function checkMaxLength(event) {
	// Prepare to restore the previous value.
	if (this.oldValue === undefined) {
		this.oldValue = this.defaultValue;
	}

	if (this.value.length > this.maxLength) {
		// Set back to the previous value.
		this.value = oldVal;
	}
	else {
		// Store the previous value.
		this.oldValue = this.value;
		
		// Make additional checks for +/- or ./, etc.
		// Also consider to combine 'maxlength'
		// with 'min' and 'max' to prevent wrong submits.
	}
}

je recommanderais également de combiner maxlength avec min et max pour éviter les soumissions erronées comme indiqué ci-dessus à plusieurs reprises.

1
répondu markus s 2017-01-26 10:56:09

les attributs les plus pertinents à utiliser seraient min et max .

0
répondu Marcel 2011-12-02 10:37:41

Ugh. C'est comme si quelqu'un avait abandonné la moitié de sa mise en œuvre et pensait que personne ne le remarquerait.

pour quelque raison que ce soit, les réponses ci-dessus n'utilisent pas les attributs min et max . Ce jQuery Le termine:

    $('input[type="number"]').on('input change keyup paste', function () {
      if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value));
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value));
    });

Il serait sans doute aussi fonctionner comme une fonction nommée "oninput" w/o jQuery si votre un de ces "jQuery-est-le-diable".

0
répondu Michael Cole 2018-06-14 02:17:31

Pour qui cherche une limitation globale comme moi:

$(document).on('keypress','input[type="number"][maxlength]', function(){
    return this.value.length < +this.attributes.maxlength.value;
});

cette fonction saisit chaque touche du document et le filtre si l'entrée est un" nombre "et a un attribut maxlength . Permet ensuite la touche pressée lorsque la longueur n'a pas atteint le maxlength. Il fonctionne également avec des entrées et des modaux dynamiquement ajoutés, etc.

0
répondu Taha Paksu 2018-07-30 08:07:27