web-dev-qa-db-fra.com

pourquoi <input type = "number" maxlength = "3"> ne fonctionne pas dans Safari?

J'aime avoir une entrée avec un maximum de 3 caractères. Dans Firefox, tout fonctionne bien, je ne peux écrire que 3 chiffres à l'intérieur de l'entrée - mais dans safari, vous pouvez écrire beaucoup de chiffres à l'intérieur.

Vous pouvez le tester dans les deux navigateurs avec ceci: http://flowplayer.org/tools/demos/validator/custom-validators.htm

Pour l'instant, je l'ai réalisé avec un plugin de validation - mais juste pour l'intérêt, j'aime savoir pourquoi cela ne fonctionne pas?

MODIFIER:

avec ça ça marche

<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>

réponse: Comment puis-je empêcher les lettres à l'intérieur d'un élément de texte?

html5safarimaxlength
33
Jules

Je l'ai accompli avec:

<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>

puis en JavaScript j'ai empêché les lettres:

$("#myField").keyup(function() {
    $("#myField").val(this.value.match(/[0-9]*/));
});
31
Jules

Vous pouvez essayer de saisir type = "text" et de saisir comme ci-dessous. Cela ne laissera que les chiffres.

<input type="text" maxlength="3" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>
14
Viktor Karpyuk

Fondamentalement, les propriétés Max et Min ne sont pas encore prises en charge dans le navigateur Safari. Je ne vois aucun défaut dans la syntaxe. Utilisez-vous la version Safari 1.3+? ou en dessous? Parce que la propriété maxlength est prise en charge à partir de safari 1.3+.

4
smhnkmr

J'ai utilisé quelque chose de très similaire à la réponse @Jules, sauf que la sienne ne permet pas l'utilisation de touches comme shift + home. Puisque nous validons les nombres, je viens d'utiliser isNaN dans la fonction de frappe.

$("#myField").keyup(function() {
    var e = $("#myField");
    if(isNaN(e.val())){
        e.val(e.val().match(/[0-9]*/));
    }
});

Avec...

<input id="#myField" inputmode="numeric" maxlength="3" pattern="([0-9]{3})" type="text" />
1
Travis Peterson

L'utilisation de la longueur onKeyDown peut être limitée

<input type="number" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">

Happy Coding :)

0
Surya R Praveen

Voici une solution plus simple. Pour moi ça a marché

<input type="number" id="cvv">


$("#cvv").on("keypress", function(evt) {
  var keycode = evt.charCode || evt.keyCode;
  if (keycode == 46 || this.value.length==3) {
    return false;
  }
});

le bloc JS empêchera le "." (point) donc on ne peut pas entrer float. Nous gardons le type d'entrée en tant que nombre, il ne s'agira donc que d'un nombre en entrée. Si la longueur de la valeur est 3, elle retournera false, donc la longueur d'entrée est également restreinte.

0
Subhabrata Banerjee