web-dev-qa-db-fra.com

Comment focaliser un champ de texte HTML sur un iPhone (faisant apparaître le clavier)?

J'écris une application Web pour iPhone et je souhaite mettre au point un champ de texte lorsque la page est chargée, ce qui permet d'afficher le clavier. Le Javascript habituel:

input.focus();

ne semble pas fonctionner. Des idées?

javascriptiphonehtml
24
Ross

Il ne montrera le clavier que si vous déclenchez le focus à partir d'un événement au clic. Placez donc un bouton sur la page avec un clic qui fait le focus et affichera le clavier. Complètement inutile sauf pour la validation (au clic de soumettre, le code de validation se concentre sur l'élément non valide)

18
BAM

Éditer: Ce qui suit ne fonctionne plus sous iOS - UIWebView autorisait les liens de mise au point automatique et d’écran d’accueil utilisés pour la mise au point automatique, mais ils l’avaient désactivé il ya plusieurs versions.

La propriété autofocus (voir ci-dessous) ne fonctionne pas à partir d'une URL dans Mobile Safari, mais fonctionne si vous êtes:

  1. en utilisant un UIWebView
  2. en utilisant un lien écran d'accueil

La taille de police de l'entrée doit être suffisamment grande pour éviter le zoom iOS10 lors d'un double-clic (maintenant que la fenêtre d'affichage est toujours zoomable) et pour concevoir la page de manière à ce qu'elle s'adapte à l'écran (sinon, lors du chargement de la page, vous obtiendrez un timing étrange/race bugs en zoom, ou si le champ est défilable, il arrive que le champ ne soit pas correctement centré sur l'écran).

autofocus: Pour cela, la spécification HTML5 est la propriété autofocus de la balise d'entrée . Mais iOS ignore cela, vraisemblablement pour une interface utilisateur plus propre qui n’affiche pas le clavier tactile lors de la navigation vers une page. Ici est une page qui illustre la propriété autofocus. Avant HTML5, vous appelez element.focus () dans l'événement window.onload. Cependant, les appels focus () ne sont pas pris en charge sur iOS, sauf pendant le gestionnaire d'un événement onclick.

6
robocat

J'ai un problème similaire, seul mon problème est que l'accent ne sera pas mis sur un événement "touchend".

http://jsfiddle.net/milosdakic/FNVm5/

Le code suivant fonctionnera sous Chrome/Safari, etc., mais échouera sous Mobile Safari. Le seul moyen de le faire fonctionner est de créer l'événement en un clic, mais vu que le code est créé pour un périphérique iOS, il serait avantageux qu'il fonctionne avec les événements tactiles.

Cela semble être un bogue avec le moteur Webkit.

2
Milos

Un peu en retard peut-être mais pour une personne future peut-être. Dans notre application Web fonctionnant sur iPad iPad (6 et plus récents), nous le faisons avec un intervalle défini:

startFocusOnTextField: function() {
        this.intervalIDForTextFieldFocus = window.setInterval(function() {
            document.getElementById(page.textInputFieldObj.id).focus();
        }, 150);
    },

Qui est appelé au chargement de la page (environnement mobile jQuery)

0
Moustachiste

Si vous définissez le focus avec un événement click, vous devez empêcherDefault sinon l'action par défaut des événements click définira le focus sur l'élément sur lequel vous avez cliqué.

0
Bee