Comment faire pour limiter le nombre de caractères qui peuvent être entrés en HTML5 numéro de champ de saisie sur iPhone

Il semble que ni la de la "maxlength", "min" ou "max" attributs HTML avoir l'effet désiré sur l'iPhone pour le balisage suivant:

 <input type="number" maxlength="2" min="0" max="99"/>

Au lieu de limiter le nombre de chiffres ou la valeur du nombre entré, le nombre est juste à gauche comme il a été tapé dans l'iPhone 4. Cette balise fonctionne sur la plupart des autres téléphones que nous avons testé.

Ce qui donne?

Aucune solution de contournement?

Si il est important de la solution, nous utilisons jQuery mobile.

Merci!

InformationsquelleAutor Lennart Rolland | 2012-03-23

32

Exemple

JS
```
function limit(element)
{
    var max_chars = 2;

    if(element.value.length > max_chars) {
        element.value = element.value.substr(0, max_chars);
    }
}
```
HTML
```
<input type="number" onkeydown="limit(this);" onkeyup="limit(this);">
```
Si vous utilisez jQuery, vous pouvez ranger le JavaScript un peu:

JS
```
var max_chars = 2;

$('#input').keydown( function(e){
    if ($(this).val().length >= max_chars) { 
        $(this).val($(this).val().substr(0, max_chars));
    }
});

$('#input').keyup( function(e){
    if ($(this).val().length >= max_chars) { 
        $(this).val($(this).val().substr(0, max_chars));
    }
});
```
HTML
```
<input type="number" id="input">
```
- Salut! Cette méthode fonctionne très bien, si j'ai de restreindre l'utilisateur à 1/2/3 personnages, mais dès que je vais dans la limite de 4 ou au-dessus, la solution se brise. Je suppose que le problème est en raison de l'ajout de", " dans le champ numéro, mais pas sûr. Pouvez vous s'il vous plaît vérifier cette solution pour les 4 caractères ou plus.
- Malheureusement, j'ai fini de compter sur javascript/jQuery pour cela. Je ne pouvais pas utiliser type="range" parce que cela a une autre sémantique.
- Pas sur keydown : autrement, pas de copier/coller
- Utilisation substring() au lieu de substr(), developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/....
InformationsquelleAutor Will Maginn
3

Selon MDN, maxlength n'est pas utilisé pour numbers. Avez-vous essayé tout à l':
```
<input type="number" min="0" max="99" />
```
OU
```
<input type="range" min="0" max="99" />
```
- tard pour le jeu, mais comment est-ce 4 upvotes? reviendrais sans aucun doute ne fonctionne pas
InformationsquelleAutor Andrew Briggs
2

Vérifier cela, il fonctionne pour moi;

Est-il un minlength validation de l'attribut HTML5?
- pattern=".{4,4}" : Grand
InformationsquelleAutor user3035081

vous pouvez utiliser ce code:

<input type="number" maxlength="2" min="0" max="99"
       onkeypress="limitKeypress(event,this.value,2)"/>

et code js:

function limitKeypress(event, value, maxLength) {
    if (value != undefined && value.toString().length >= maxLength) {
        event.preventDefault();
    }
}

Merci, mon Pote @Behnam Btw Pourquoi nous avons besoin de maxlength="2" min="0" max="99" ici ...?? Avec eux, il Fonctionne très bien, je suppose 🙂
maxlength attr ne fonctionnent pas dans l'entrée avec type="number"

InformationsquelleAutor Behnam Mohammadi

1

comme Andrew dit, vous avez besoin de changer le type de gamme, à côté de qui vous allez avoir des problèmes avec IE et FF, et probablement le vieux ipad navigateur parce que c'est de l'HTML 5, et c'est un "Genre Nouveau". Jetez un oeil à cette personne qui a essayé la gamme avec JS,
Préciser une plage de numéros d'entrée dans le champ du numéro à l'aide de javascript

InformationsquelleAutor jcho360
1

Vous pouvez utiliser JavaScript pour vérifier le nombre de caractères dans la boîte et si ils sont trop nombreux, supprimer un:
http://www.webcodingtech.com/javascript/limit-input-text.php

InformationsquelleAutor ToshNeox

Ici un plus optimisé la version jQuery qui met en cache les sélecteurs.
Il utilise également l'attribut maxlength qui n'est pas pris en charge par le type d'entrée nombre.

//limits the input based on the maxlength attribute, this is by default no supported by input type number
$("input[type=number]").on('keydown keyup',function(){ 
    var $that = $(this),
    maxlength = $that.attr('maxlength')
    if($.isNumeric(maxlength)){
        $that.val($that.val().substr(0, maxlength));
    };
});

InformationsquelleAutor Tom Franssen

Une autre option avec jQuery, mais onkeypress cas... 😉

$("input[type=number]").on('keypress',function(e) { 
    var $that = $(this),
    maxlength = $that.attr('maxlength')
    if($.isNumeric(maxlength)){
        if($that.val().length == maxlength) { e.preventDefault(); return; }

        $that.val($that.val().substr(0, maxlength));
    };
});

InformationsquelleAutor Tripex

0

Je sais que cette question est d'un an mais je ne préfère pas la réponse choisie. Parce que la façon dont il fonctionne, c'est qu'il montre le caractère tapé, puis le supprime.

En revanche, je vais proposer une autre manière qui est similaire à la Volonté, c'est juste mieux dans la façon qu'elle empêche le personnage d'être montré. Aussi j'ai ajouté un else if bloc de vérifier si le caractère est un nombre et puis c'est une bonne fonction pour valider le nombre de champs.

HTML
```
<input type="number" onkeydown="limit(this);">
```
JS
```
function limit(element)
{
    var max_chars = 2;
    if (arguments[1].char !== "\b" && arguments[1].key !== "Left" && arguments[1].key !== "Right") {
        if (element.value.length >= max_chars) {
            return false;
        } else if (isNaN(arguments[1].char)) {
            return false;
        }
    }
}
```
InformationsquelleAutor Reza

C'est Tripex réponse optimisée pour permettre de supprimer des clés, des travaux lors de la saisie et de la sur la pâte.

$(document).on("keyup", "#your_element", function(e) {
    var $that = $(this),
    maxlength = $that.attr('maxlength');
    if ($.isNumeric(maxlength)){
        if($that.val().length === maxlength) {
            e.preventDefault();
            //If keyCode is not delete key 
            if (e.keyCode !== 64) {
                return;
            }
        }
        $that.val($that.val().substr(0, maxlength));
    }
});

InformationsquelleAutor Daniel Avellaneda

Vous devez vous connecter pour publier un commentaire.