Afficher le clavier numérique de l'iPhone en utilisant l'entrée de texte

Avis que l'utilisation de input type="number" peut afficher un clavier numérique comme ci-dessous:

Est-il possible d'utiliser input type="text" à afficher le même clavier numérique? J' ne pas vous voulez afficher un pavé numérique à l'aide de pattern="\d*" car il est possible que la valeur contient une décimale.

La raison pour laquelle je voudrais utiliser input type="text" au lieu de input type="number" est que je ne peut pas revenir à la valeur si je saisir un nombre dans un champ numérique. Par exemple, si j'ai d'entrée ABC, il se vide automatiquement. Il me semble que l'utilisation de input type="text" sera plus facile pour ce genre de contrôle.

Quel est le problème avec l'aide de type="number"?
Salut deceze, j'ai editted ma question. Merci.
Il est, en HTML5.1, un attribut qui s'appelle "inputmode" qui est le moyen de soutenir cette. Donc, si vous voulez avoir <input type="text" inputmode="numeric" name="whatever">Cependant, il ne l'est pas en HTML5, donc je suppose qu'il n'est actuellement pas beaucoup voire pas du tout.
La Solution ici: stackoverflow.com/a/25599024/1922144
inputmode="numeric" ne fonctionne plus.

OriginalL'auteur red23jordan | 2013-05-09

10

Si votre entrée est un nombre réel, entier ou décimal, puis utiliser le HTML5 type="number" d'entrée. Cela va mettre en place correcte du clavier sur les périphériques Android (Windows phone).

Alors l'astuce est de placer un pattern="[0-9]*" sur cet attribut pour obliger le pavé numérique sur iOS. Note:
1. Ce ne marque pas un nombre décimal ou un signe moins valide car le modèle de l'attribut est actuellement PAS valide sur un type="number"! et
2. C'est le SEULEMENT façon d'obtenir de l'iOS clavier numérique. Voir la différence entre le numéro de la section de l'alpha clavier (comme dans la capture d'écran ci-dessus) par rapport à la véritable clavier numérique.
Une dernière remarque, assurez-vous DE ne PAS utiliser le numéro de type de champ pour les entrées qui ne sont pas de vrais numéros (par exemple. zipcodes avec des zéros ou des codes de produit par des virgules ou des espaces). Une entrée numérique de terrain ne PEUVENT PAS PRÉSENTER de valeurs qui ne sont pas de vrais numéros! (selon le navigateur/appareil)

À l'aide de pattern="[0-9]*" ne pas mettre le bon nombre de clavier sur Iphone, il n'a aucun moyen de passer à alphabétiques ou clavier des symboles et il n'y a pas de point décimal soit

OriginalL'auteur davidelrizzo
2

utiliser ce code:
```
<input type="number" pattern="[0-9]*" />
```
À l'aide de pattern="[0-9]*" ne pas mettre le bon nombre de clavier sur Iphone, il n'a aucun moyen de passer à alphabétiques ou clavier des symboles et il n'y a pas de point décimal soit

OriginalL'auteur Behnam Mohammadi
1

Il existe d'autres types qui peuvent affichage du clavier numérique.

Avec type="number" vous ne pouvez rien faire. Il n'accepte pas n'importe quoi mais des numéros. Mais si vous utilisez le type="tel", c'est un vilain hack, mais il fonctionne.

Voici mon code postal exemple:
```
<input type="tel" id="Address_ZipCode" class="zip-code" pattern="^\d{2}-\d{3}$" maxlength="6">
```
Il y en aura un problème avec la touche "-" sur certains claviers à l'écran, vous pouvez contourner ce problème en ajoutant le tableau de bord après le nombre spécifié de caractères en JavaScript comme ceci:
```
//Zip Code dashes
$('input[type="tel"].zipCode').keyup(function(event) {
    var t = event.target, v = t.value;
    if (v.length == 2) { t.value = v + '-'; }
});
```
(S'il vous plaît excusez jQuery).
Au lieu d'utiliser type="tel", vous pouvez utiliser type="texte" et le modèle de la propriété, mais je n'ai pas encore testé. Plus vraisemblablement, il ne fonctionne pas avec la plupart des navigateurs.

type="tel" de l'iphone affiche un clavier qui n'a aucun moyen d'entrer un point décimal

OriginalL'auteur Harry
0

Je ne pourrais pas trouver de solution pour que, dès maintenant.

Mais une astuce que vous pourriez faire est d'utiliser type="nombre" et de modifier en javascript avec le document.getElementById("élément").type="text";

mais cependant ce serait également effacer l'ABC, mais d'accepter les numéros des virgules et des décimales

Oui, je l'ai utilisé, mais le clavier est par défaut le clavier et le clavier numérique ne s'ouvre pas : (
vérifiez ici jsfiddle.net/svenkatreddy/REHyd Avec Cela, vous pouvez obtenir le clavier numérique et le type d'entrée est toujours "texte", mais cependant, je ne peux l'accepter Alphabhets (ABC sera effacé) et le clavier Numérique ne figure en premier temps, si vous le souhaitez pour plusieurs fois juste à stocker la valeur de l'entrée dans la variable et de les convertir à la sortie de type "nombre" je suis désolé, mais c'est le seul hack, disponible dès à présent.

OriginalL'auteur Venkat Reddy

Essayer cette workarround. A travaillé pour moi.

Ce sera à son tour le type de numéro, puis de revenir au texte.
Cela va forcer ios pour passer en numérique keybord sur la première prop changement.
Le setSelectionRange est pour sélectionner la valeur d'entrée.

$(function(){

    $("input[type='text']").on('mouseup', function(e){
        e.preventDefault();
    });

    $("input[type='text']").on('focus click', function(e){
        $(this).prop('type', 'number');
        var obj = $(this);
        setTimeout(function(){
            obj.prop('type', 'text');
            document.getElementById(obj.attr('id')).setSelectionRange(0, 9999);
        }, 50);     
    });
});

OriginalL'auteur Jhonatan Muller

Vous devez vous connecter pour publier un commentaire.