Existe-t-il une méthode multiplate-forme acceptable pour afficher un clavier numérique dans des formulaires Web standard sur un périphérique tactile?

L'objectif : trouver une solution multiplate-forme pour afficher des claviers numériques sur des appareils mobiles basés sur le toucher, avec un minimum de hacks.

Le problème :

  • Quelle est la mémoire du taco et pourquoi suis-je bas?
  • OnInceptceptTouchEvent obtient seulement ACTION_DOWN
  • Partagez l'intention via facebook pour la gelée Android
  • Ajouter un événement Calendrier à Android à partir du téléchargement .vcs.
  • SDK Lieu non trouvé dans studio Android
  • Envoi de SMS dans Android
  • J'ai une application Web régulière utilisant des formulaires de saisie de données, contenant principalement des données numériques. Lorsqu'un utilisateur interagit avec mon site sur un appareil mobile, j'aimerais afficher un clavier virtuel numérique car la plupart des claviers standard nécessitent une seconde pression pour passer d'alphas à nombre. Je sais que je peux déclencher un clavier différent en définissant l'attribut "type" de l'élément de saisie:

    type=number : Cela fonctionne très bien sous iOS / Safari. Je ne suis pas sûr d'autres navigateurs sur la plate-forme.

    Sur Android, cela n'élève pas toujours le clavier correct sur différents navigateurs et aboutit souvent à des boutons d'ascenseur indésirables sur l'entrée. Je n'ai pas encore trouvé un moyen propre de les désactiver dans CSS.

    type=tel : Cela fonctionne presque sur iOS / Safari, mais le clavier téléphonique manque d'un bouton décimal.

    Il semble fonctionner très bien sur plusieurs navigateurs Android, sans aucun élément d'interface utilisateur supplémentaire ajouté à la page.

    Ma solution actuelle est hacky et simpliste. Sur la base d'une classe que j'utilise déjà pour la validation numérique, je remplace chaque élément de texte qui doit contenir un nombre avec une nouvelle entrée qui est soit un number soit un type de type basé sur le système d'exploitation / navigateur détecté.

     var isAndroid = navigator.userAgent.match(/android/i) ? true : false; var isIOS = navigator.userAgent.match(/(ipod|ipad|iphone)/i) ? true : false; if (isAndroid || isIOS) { var useNumberType = (isIOS ? true : false); //iOS uses type=number, everyone else uses type=tel jQuery("input.num").each(function () { var type = (useNumberType ? "number" : "tel"); var html = this.outerHTML; html = html.replace(/(type=\"?)text(\"?)/, "$1" + type + "$2"); this.outerHTML = html; }); } 

    Je préférerais ne pas utiliser la détection du navigateur et ne pas modifier les entrées à la volée au moment de l'exécution. Je pourrais éventuellement introduire un module http du côté serveur qui a fondamentalement la même chose, mais ce n'est pas beaucoup mieux. Je suis choqué qu'il n'y ait pas un appel CSS pour cela.

    Existe-t-il un meilleur moyen d'obtenir un clavier numérique avec un bouton décimal, qui fonctionne sur tous les périphériques mobiles basés sur la tourelle ou la plupart du temps sans ajouter d'éléments UI étranges à la page?

    ————– mettre à jour

    Je ne pense pas qu'il existe un moyen de faire ce que je veux vraiment faire, c'est-à-dire configurer un style ou un type de saisie unique qui fonctionnera bien dans les navigateurs de bureau et toutes les principales plates-formes mobiles basées sur le toucher. Je me suis arrangé pour changer le type d'entrée par un appel DOM direct plutôt que par jQuery au lieu de réécrire l'entrée entière via outerHTML. Je soupçonne qu'il n'y a pas beaucoup de différence d'effet, mais le code est un peu plus propre. Étant donné que je ne modifie pas les types d'entrée sur le bureau, je ne devrais pas me soucier de la restriction de lecture de IE uniquement sur l'attribut.

    Idéalement, je traiterais probablement cela du côté du serveur, donc tout a été envoyé au navigateur dans le format souhaité pour l'appareil qui effectue la demande. Mais pour le moment, le nouveau code ressemble plus à ceci:

     var isAndroid = navigator.userAgent.match(/android/i) || navigator.platform.match(/android/i) ? true : false; var isIOS = navigator.userAgent.match(/(ipod|ipad|iphone)/i) ? true : false; if (isAndroid || isIOS) { var useNumberType = (isIOS ? true : false); //iOS uses type=number, everyone else uses type=tel jQuery("input.num").each(function () { var type = (useNumberType ? "number" : "tel"); if (this.type == "text") { this.type = type; } }); } 

  • Désérialiser JSON à Java enum
  • La superposition de la barre d'action ne fonctionne pas comme prévu
  • DeadObjectException sur l'application Android
  • Comment définir une étiquette entière dans un widget dans le fichier de mise en page xml?
  • Fragment: quel rappel appelle lorsque vous appuyez sur le bouton Précédent et personnalisez-le
  • Compatibilité pour SwitchPreference (pré ICS)?
  • One Solution collect form web for “Existe-t-il une méthode multiplate-forme acceptable pour afficher un clavier numérique dans des formulaires Web standard sur un périphérique tactile?”

    Protip: lorsque vous travaillez avec un mobile, n'interférez pas avec l'expérience de l'utilisateur. Cela signifie garder les claviers intégrés tels qu'ils sont.

    Certains utilisateurs peuvent même avoir un Javascript désactivé sur leurs appareils mobiles / navigateurs!

    Ce que vous devriez faire ici est d'inclure un indice HTML sur le navigateur. De cette façon, les navigateurs mobiles devraient savoir quel type de contenu ils interagissent.

    HTML5 comprend plusieurs nouveaux types de contenu <input> qui devraient être pris en charge sur tous les appareils mobiles modernes (et la plupart des navigateurs modernes)

    Vous pouvez trouver la liste complète ici .

    Ce que vous voulez spécifiquement est ce qui suit:

    Ancien code:

     Phone number: <input type="text" name="phone" /> 

    Nouveau code:

     Phone number: <input type="tel" name="phone" /> 

    Je ne sais pas si les navigateurs supportent actuellement "tel" , alors vous pouvez utiliser quelque chose comme suit:

     Phone number: <input type="number" name="phone" min="1000000000" max="9999999999" /> 

    C'est un peu un hack, mais c'est une autre option pour vous.

    C'est beaucoup plus simple et plus durable de faire les choses, et mieux pour l'utilisateur.

    Veuillez me faire savoir si vous avez des questions. Je sais que cela ne répond pas directement à la question, mais c'est une meilleure façon de faire pour l'instant, à mon avis. 🙂

    MODIFIER:

    Un moyen possible de contourner cela pour chaque navigateur est en vérifiant l'agent utilisateur en utilisant JS / Jquery. Je ne sais pas exactement comment faire cela, mais voici un didacticiel sur la façon de le faire dans .NET et la modification du CSS pour chaque élément en utilisant JQuery.

    EDIT EDIT !:

    Essayez simplement de modifier votre code en tant que tel:

     var isAndroid = navigator.userAgent.match(/android/i) ? true : false; var isIOS = navigator.userAgent.match(/(ipod|ipad|iphone)/i) ? true : false; if(isIOS) $(.phoneInput).attr("type", "tel"); if(isAndroid) { $(.phoneInput).attr("type", "number"); $(.phoneInput).attr("min", "1000000000"); $(.phoneInput).attr("max", "9999999999"); } 

    J'espère que cela fonctionne bien! Vous devrez peut-être changer les deux instructions if , selon la façon dont votre test se révèle.

    coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.