web-dev-qa-db-fra.com

Comment restreindre le nombre de caractères pouvant être saisis dans le champ de saisie du nombre HTML5 sur iPhone

Il semble qu'aucun des attributs HTML "maxlength", "min" ou "max" n'ait l'effet souhaité sur 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 simplement laissé tel qu'il a été tapé sur l'iPhone 4. Ce balisage fonctionne sur la plupart des autres téléphones que nous avons testés.

Ce qui donne?

Des solutions?

Si cela est important pour la solution, nous utilisons jQuery mobile.

Merci!

iphonehtmlhtml5jquery-mobileinput
20
Lennart Rolland

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 un peu le JavaScript:

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">
32
Will Maginn

Selon MDN , maxlength n'est pas utilisé pour numbers. Avez-vous essayé juste:

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

OR

<input type="range" min="0" max="99" />
3
Andrew Briggs

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();
    }
}
2
Behnam Mohammadi

Regardez ça, ça marche pour moi;

Existe-t-il un attribut de validation de longueur minimale en HTML5?

2
user3035081

Vous pouvez utiliser JavaScript pour vérifier le nombre de caractères dans la boîte et s'il y en a trop, supprimez-en un: http://www.webcodingtech.com/javascript/limit-input-text.php

1
ToshNeox

comme Andrew l'a dit, vous devez changer le type en plage, à côté de cela, vous allez avoir des problèmes avec IE et FF et probablement l'ancien navigateur ipad parce que cela vient de HTML 5, et c'est un "Kind New" ". Jetez un œil à cette personne qui a essayé la plage avec JS, Spécifiez la plage de nombres à saisir dans le champ numérique en utilisant javascript

1
jcho360

Voici une version jQuery plus optimisée qui met en cache les sélecteurs. Il utilise également l'attribut maxlength qui n'est pas pris en charge par le numéro de type d'entrée.

// 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));
    };
});
1
Tom Franssen

Une autre option avec jQuery, mais événement onkeypress ...;)

$("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));
    };
});
1
Tripex

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

En revanche, je proposerai une autre manière qui est similaire à celle de Will, c'est juste mieux dans la mesure où elle empêche le personnage d'être montré. J'ai également ajouté un else if bloquer pour vérifier si le caractère est un nombre puis c'est une bonne fonction pour valider les champs numériques.

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;
        }
    }
}
0
Reza

Il s'agit de la réponse Tripex optimisée pour permettre la suppression de la clé, fonctionne lors de la frappe et du collage.

$(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));
    }
});
0
Daniel Avellaneda