Corriger la position du curseur d’un input après l’ouverture du clavier

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');
});