Le problème : Sur une application mobile à la saisie, le curseur part en vacances…
Lorsqu’on développe une application mobile en HTML5 / Cordova, on a souvent le problème suivant:
Si on sélectionne un champ de saisie, le clavier du smartphone s’ouvre et remonte l’application pour permettre de voir ce que l’on écrit sans que le clavier ne cache ce champs.
Or souvent, le champs se déplace à l’écran mais le curseur reste à l’endroit initial du champ.
Du coup, on a un curseur qui clignote dans le vide et notre champ de formulaire est bien remonté sur l’écran.
La Solution : CSS et JS
La solution est d’ajouter ces règles CSS:
input { text-shadow: rgba(0,0,0,0) 0px 0px 0px; } input.force-redraw { text-shadow: none; }
Ce code va forcer le navigateur à redessiner l’input de façon invisible pour l’utilisateur
Puis dans votre code Javascript ajouter la règle suivante:
// déclaration d'une variable globale javascript: plici_focused_input = {}; // On attends un focus sur un champs input jQuery("body").on("focus", "input", function () { plici_focused_input = jQuery(this); }); // dans l'eventListener d ouverture du clavier: window.addEventListener('native.keyboardshow', function (e){ plici_focused_input.toggleClass('force-redraw'); });