Controler le focus du input

Bonjour

Je me demandais si c'était possible de contrôler le focus d'un input ... Bon je me doute que tout est possible, surtout quand on a l'arme ultime : le js. (non pas de jquery svp).

Mais, en css, ça donne quoi ?

Je m'explique : j'ai un beau téléphone de m****de et lorsque je test un input, le clavier s'ouvre et l'écran affiche théoriquement l'input. Mais ça ce n'est que théorie, lorsque je fais mes essaies, il faut scroller dans le tout petit espace disponible pour retrouver l'input caché et pianoter dedans. De plus, l'input reste à la taille initial.

Est-il possible donc de faire en sorte que lorsqu'on a le focus, l'input reste visible et soit grossi pour mieux voir ce qu'on fait ? Un peu comme dans une application...

Et tout ceci en css ???

Merci d'avance aux personnes qui se pencheront sur mon problème

Je trouve qu'en ce moment les demandes postées sur Alsacréations son obscures, ou au mieux pas claires... et ce quelque soit l'auteur du topic.

Enfin, pour ce qui concerne l'input - si j'ai bien compris la question - il faut utiliser la pseudo classe :focus. Pour le CSS :

.input:focus {
    /* ici les règles à appliquer quand l'input est en focus, genre une taille plus importante */
}

Si l'on veut qu'un focus soit appliqué directement sur l'un des inputs d'une page web il faut lui ajouter l'instruction autofocus. Exemple :

<input type="text" id="user_login" name="user_login" placeholder="pseudo@gmail.com" autofocus>

Modifié par Olivier C (26 Mar 2016 - 02:55)

Bonjour,

si, sur un smartphone, tu "tap" enfin clique sur un input, que ça ouvre le clavier virtuel en bas de l'écran et que l'input se retrouve sous le clavier, c'est un problème avec l'OS oui
Faudra que je reteste avec Android 5+ et iOS 7+ mais j'ose espérer que la page est scrollée pour déplacer l'input dans la moitié haute de l'écran. Quoiqu'iOS qui zoome légèrement et fait je sais plus quoi m'a bien gonflé pendant mes tests...

autofocus > ce n'est à peu près jamais souhaitable de l'utiliser pour des raisons d'accessibilité (et même de "piège clavier" pour ceux qui comme moi utilisent espace ou Page Down ou flèche bas pour scroller) sauf sur LA page de recherche avancée ou LA page de suivi de colis ou de tracking (ou LA page la plus vue au monde qui est la page d'accueil d'un certain moteur de recherche... mais on est pas Google edit : ah nan, ça doit être FB). Mais c'est bien de savoir que ça existe et c'est 10x mieux que tous les bricolages JS qu'on a pu subir par le passé
Modifié par Felipe (26 Mar 2016 - 10:13)

Bonjour et merci pour vos réponses

C'est vrai que s'il y a bien un truc qui est et restera chiant, c'est de s'adapter à la multitude de version d'OS de nos visiteurs. Etre à la fois visible partout, de façon épurée, intuitif et surtout fonctionnel...

Bref, je me doute que ma question est un peu tordue et inhabituel car ce n'est que du détails, voir du gadget.
Mais ce sont les détails qui font la différence. Remplir un formulaire sans avoir à se faire ch*** à rescroller la page pour retrouver son input derrière le clavier virtuel, et ce à chaque changement d'input, ça fait une différence flagrante.
Un gain temps, des gestes en moins, de la facilité, de la fluidité...tout ceci pour capter / garder et l'aider toujours un peu plus à remplir son formulaire. Au final, un gadget qui peut avoir un influence sur le taux de remplissage, surtout quand on sait que 80% de mes visiteurs sont des "mobiliens".

Du coup, je suis partie sur un mix entre js / css . Jusqu'à present, ** avec mon téléphone **, lorsque je cliquais sur un input, entre la barre de menu du haut réduite à 45px, et le clavier virtuel, je disposais d'a peine d'une 50ain de pixel pour calé le fameux input... Et bien entendu, il n'était jamais dedans.

Maintenant, ce que je fait, c'est qu'au focus, je lance une anim pour retirer en douceur ma barre de menu. Je zoom sur le input et je le cale au dessus de mon clavier virtuel. Et plutôt que de faire "entrer" qui au passage, soumet le formulaire au lieu de passer à l'input suivant, je pense ajouter un bouton suivant.
C'est loin d'être fini mais déjà bien plus agréable d'utilisation.

Merci pour l'autofocus, je vais regarder ça en détail car je ne connais pas.

hs : C'est vrai que gg à des soucis à se faire avec les projets de Fb !!

Hello,

Juste une question...
Tu as quoi comme téléphone pour ne pas, au focus, scroller jusqu'à l'input lié ?

iOS gère très bien ce comportement et à même 2 boutons (input suivant/précédent). Je suppose que Android/Microsoft doivent faire pareil non ? (d'habitude ils se recopient toujours les uns les autres...)

Peut-être tu as une marque un peu exotique et du coup, tu auras beaucoup de temps/boulot pour toucher une faible proportion de visiteur ? Aussi, vu que c'est natif sur certains device, tu créeras sans doute plus de bug que de solution...

Double poste, désolé
Modifié par Yordi (29 Mar 2016 - 10:30)

Non je pense pas être dans l'exotique, j'ai un Sony xperia (bas de gamme) et android 4.1.1
Mais c'est vrai que c'est un téléphone pas puissant du tout, juste ce qu'il faut pour téléphoner. A l'époque je n'avais pas besoin de gadget... mais ça c'était avant lol. Va falloir investir !!

Tu as peut-être raison, c'est pour ça qu'une fois que cette version sera en ligne, je demanderais à qui le voudra bien, de tester le site sur mobile. Car le mien à du mal à afficher une pauvre animation.

En revanche, ce que je trouve bien sur ce téléphone, c'est qu'étant qu'il n'est pas puissant, s'il fait ce que je lui demande alors il y a fort à parier que ça fonctionne sur les plus gros.