web-dev-qa-db-fra.com

Forcer le clavier numérique iOS avec un motif personnalisé/monétaire

Est-il possible de forcer un périphérique iOS à afficher le clavier numérique lors de l'utilisation d'un modèle personnalisé en tant que type d'entrée ?

mon modèle d'entrée:

<input id="price" class="numeric" pattern="\d+((\.|,)\d{1,2})?" name="price" 
title="" data-mini="true" data-clear-btn="true" autocomplete="off" autofocus />

Je souhaite saisir une valeur monétaire telle que "14,99" et afficher un clavier avec accès aux chiffres sur le périphérique iOS

<input type='number' />
<input pattern='[0-9]*' />
<input pattern='[\d]*' />

il manque tous le signe décimal et/ou ne valident pas en tant que nombre lors de l'ajout d'un signe décimal. Une autre manière pourrait être une fonction javascript qui crée le signe décimal au bon endroit, comme appuyer 1- - 2-> 9-> 9 dans cet ordre crée une pression sur la touche () 0.01-> 0.12-> 1.29-> 12.99, mais cela nécessite que le champ de saisie soit type='text' ->. Le problème évident est que le clavier de texte est affiché lors de la mise au point du champ de saisie.

Comment puis-je résoudre ce problème?

MODIFIER

Environnement:

  • JQM 1.3.2
  • jquery 1.8.2
javascriptiosjquery-mobilekeyboard
17
tronc

Pour l'instant, JavaScript est la seule solution. Voici le moyen le plus simple de le faire (en utilisant jQuery):

HTML

<input type="text">

JavaScript

$('input[type="text"]').on('touchstart', function() {
  $(this).attr('type', 'number');
});

$('input[type="text"]').on('keydown blur', function() {
  $(this).attr('type', 'text');
});

L'idée est simple. L'entrée commence et se termine par type = "text", mais devient brièvement type = "number" dans l'événement touchstart. Cela provoque l'affichage du clavier iOS correct. Dès que l'utilisateur commence à entrer une entrée ou quitte le champ, l'entrée redevient à nouveau type = "text", contournant ainsi la validation.

Il y a un inconvénient à cette méthode. Lorsque l'utilisateur revient à une entrée déjà complétée, l'entrée sera perdue (si elle n'est pas validée). Cela signifie que l'utilisateur ne pourra pas revenir en arrière et modifier les champs précédents. Dans mon cas, ce n’est pas si grave que cela, car l’utilisateur voudra peut-être utiliser la calculatrice avec des valeurs différentes de façon répétée. La suppression automatique de l’entrée leur permettra de gagner quelques étapes. Cependant, cela peut ne pas être idéal dans tous les cas.

Il semblerait que Mobile Safari prenne en charge les nouveaux attributs de type de saisie HTML5: courrier électronique, numéro, recherche, tél et URL. Ceux-ci changeront le clavier qui est affiché. Voir l'attribut type.

Vous pouvez par exemple faire ceci: 

<input type="number" />

Et lorsque la zone de saisie est activée, le clavier numérique est affiché (comme si l'utilisateur disposait du clavier complet et appuyait sur le bouton "123".

Si vous ne voulez que des nombres, vous pouvez spécifier: 

<input type="tel" />

Et l’utilisateur obtiendrait alors le clavier de composition du numéro de téléphone.

Je sais que cela fonctionne avec Mobile Safari - je suppose seulement que cela fonctionnera avec UIWebView.

http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/

19
Vizllx

J'ai réalisé ce petit extrait pour obtenir ce que vous voulez et je l'ai testé sur iPhone 5 v7.0.3

J'ai utilisé 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 de (avant) tableau après la marque décimale.

Cela peut paraître compliqué, en raison de mes compétences en programmation.

1) Code démo- 2) Démo de conversion de devise

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

8
Omar

Je pense que vous pouvez utiliser la même approche que j'ai suggérée à Ranjan .

Utiliser un champ de texte comme un tampon. Vous devez d’abord détecter le moment où le clavier apparaît et vérifier si le premier répondant est la vue Web. Ensuite, vous devenez une vue de texte en tant que premier répondant.

Lorsque vous définissez le texte dans l'entrée de la vue Web, vous pouvez ajouter une logique pour valider le nombre.

Ici est un lien de mon exemple de projet avec la solution, dans votre cas, vous n'avez pas besoin de changer inputView. Mais l'approche est la même, utilisez un homme au milieu.

0
dcorbatta

Je ne peux pas commenter sur https://stackoverflow.com/a/19998430/6437391 so en tant que réponse séparée ...

C'est la même idée que https://stackoverflow.com/a/19998430/6437391 mais au lieu de changer de type, c'est le modèle qui a été changé.

Cela a pour effet de ne pas effacer la valeur du champ de texte sur le focus lorsque la valeur ne correspond pas au format numérique, par exemple, si la valeur comporte des séparateurs (1 234.56). 

$('input[type="text"]').on('touchstart', function() {
  $(this).attr('pattern', '[0-9]*');
});

$('input[type="text"]').on('focus', function() {
  $(this).attr('pattern', actualpattern);
});
0
Mark Anthony Torres