web-dev-qa-db-fra.com

html5 numéro de type d'entrée avec motif regex dans mobile

J'essaie d'obtenir un modèle d'expression régulière dans le type d'entrée number pour afficher uniquement les nombres et les points. J'ai essayé quelque chose comme ça.

<input type="number" pattern="[0-9.]*">

<input type="tel">

Les deux affichent uniquement des chiffres (0-9), mais ne s'affichent pas. (point). J'ai besoin d'utiliser un point dans le champ de saisie.

Est-ce possible via html5? Ou dois-je aller avec javascript?

Remarque: cela fonctionne bien dans Android, mais. (point) ne s'affiche pas sur les iphones

Je dois afficher le clavier mobile comme ceci ..

enter image description here

Une aide à ce sujet?

htmlioscsshtml5numpad
31
UI_Dev

Si vous spécifiez uniquement "type = numéro", le clavier s'affiche sur l'iPhone comme:

enter image description here

Et si vous spécifiez un modèle comme <input type="number" pattern="\d*"/> ou <input type="number" pattern="[0-9]*" />, le clavier de l'iPhone ressemblera à ceci:

enter image description here

Il ne peut toujours pas afficher le point (.), Il n'y a actuellement aucun modèle pour gérer un tel cas.

Vous pouvez donc opter pour <input type="tel" /> qui fournira un clavier comme:

enter image description here

Veuillez vous référer aux liens ci-dessous pour plus de détails sur les entrées pour iOS:

http://bradfrost.com/blog/mobile/better-numerical-inputs-for-mobile-forms/

http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html

https://about.zoosk.com/nb/engineering-blog/mobile-web-design-use-html5-to-trigger-the-appropriate-keyboard-for-form-inputs/

http://mobiforge.com/design-development/html5-mobile-web-forms-and-input-types

http://www.petefreitag.com/item/768.cfm

http://html5tutorial.info/html5-contact.php

J'espère que ceci vous aidera. :)

Mises à jour pour la personnalisation (référence: https://stackoverflow.com/a/20021657/1771795 )

Vous pouvez faire une certaine personnalisation en utilisant javascript. Prenons l'exemple d'une entrée de devise avec un modèle décimal dans lequel e.which pour lire CharCode entré, puis le pousser dans un tableau (avant) qui représente les chiffres avant la marque décimale et un autre tableau (après) pour déplacer les valeurs du tableau (avant) au-delà de la marque décimale.

lien violon complet

HTML: 

<input type="tel" id="number" />

[~ # ~] js [~ # ~]

Variables et fonctions:

// declare variables
var i = 0,
    before = [],
    after = [],
    value = [],
    number = '';

// reset all values
function resetVal() {
    i = 0;
    before = [];
    after = [];
    value = [];
    number = '';
    $("#number").val("");
    $(".amount").html("");
}

// add thousand separater
function addComma(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

Code principal: 

// listen to keyup event
$("#number").on("keyup", function (e, v) {

    // accept numbers only (0-9)
    if ((e.which >= 48) && (e.which <= 57)) {

        // convert CharCode into a number   
        number = String.fromCharCode(e.which);

        // hide value in input
        $(this).val("");

        // main array which holds all numbers
        value.Push(number);

        // array of numbers before decimal mark
        before.Push(value[i]);

        // move numbers past decimal mark
        if (i > 1) {
            after.Push(value[i - 2]);
            before.splice(0, 1);
        }

        // final value
        var val_final = after.join("") + "." + before.join("");

        // show value separated by comma(s)
        $(this).val(addComma(val_final));

        // update counter
        i++;

        // for demo
        $(".amount").html(" " + $(this).val());

    } else {

        // reset values
        resetVal();
    }
});

Réinitialiser: 

// clear arrays once clear btn is pressed
$(".ui-input-text .ui-input-clear").on("click", function () {
    resetVal();
});

Résultat:

enter image description here

21
Mazzu

Tous les types et attributs d'entrée ne sont pas pris en charge dans tous les navigateurs. En général, la plupart des navigateurs modernes d'IE10 + incluent des bases telles que l'e-mail et le numéro.

Le navigateur reviendra à une entrée de texte standard lorsqu'un type spécifique et ignorera les attributs lorsque ces valeurs ne sont pas prises en charge.

enter image description hereenter image description here

Vous devez donc utiliser un bon modèle d'expression régulière.

par exemple

<input type="tel" name="tel" pattern="^(?:\(\d{3}\)|\d{3})[- . ]?\d{3}[- . ]?\d{4}$" />
  • 1234567899
  • 123 456 7899
  • 123-456-7899
  • 123.456.7899

prise en charge

Prise en charge du navigateur pour le type "tel"

  • Android (oui)
  • iOS (oui)
  • IE (oui)
  • Mobile (oui)
  • Opera (oui)
  • Mobile (oui)
  • Opera (oui)
  • Classique (oui)
  • Opera Mini (non)
  • Firefox (oui)
  • Mobile (oui)
  • Chrome pour Android (oui)

(Sources: caniuse.com, DeviceAtlas, mobilehtml5.org)

Prise en charge du navigateur pour l'attribut de modèle

Mais l'attribut pattern est pris en charge dans Internet Explorer 10, Firefox, Opera et Chrome. Et n'est pas pris en charge dans Internet Explorer 9 et versions antérieures, ou dans Safari.

13
amirhossein693

Malheureusement, il n'est pas possible d'obtenir la fonctionnalité exacte que vous recherchez n'est pas possible. Cependant, il existe une sorte de "hack" qui donnera des fonctionnalités similaires:

http://www.brownphp.com/2011/05/iphone-currency-input-web-apps/

C'est un peu de JS qui remplit automatiquement la décimale lorsque l'utilisateur commence à taper, comme ceci: 0,01 -> 0,12 -> 1,23 -> 12,34. Cela peut donc être utilisé pour un effet similaire.

2
Rick

J'ai eu un scénario similaire selon lequel je devais prendre en charge à la fois la virgule et le point comme marque décimale et regroupement de chiffres [voir ici]

Par exemple.

1,00/1,00
1 000 000,00/1 000 000,00

En même temps, le scénario exigeait que le clavier numérique soit affiché sur les appareils mobiles.

L'implémentation initiale a combiné le type "nombre" avec l'attribut pattern.

<input type="number" pattern="^(0*[,.]*[0-9][0-9]*([,.][0-9]+)*|[0-9]?[,.][0-9]*[1-9][0-9]*)$" required />

Cependant, la validation du nombre a échoué les entrées que le modèle permettrait. Cela signifiait que le champ et donc le formulaire étaient marqués comme invalides.

La solution était de changer le type en "tel".

<input type="tel" pattern="^(0*[,.]*[0-9][0-9]*([,.][0-9]+)*|[0-9]?[,.][0-9]*[1-9][0-9]*)$" required />

Les utilisateurs mobiles verraient désormais un clavier numérique par défaut, et la validation du modèle serait utilisée pour valider l'entrée.

2
Kildareflare