Position du caret JavaScript

Question

Je développe une application bancaire mobile et je suis intéressé par le formatage des entrées de montants en devises en temps réel.

J'ai déjà testé plugin autoNumeric y Plugin jQuery Format Currency mais les deux ont des problèmes de position du curseur sur les navigateurs Android 2.*.

Quelqu'un a-t-il une solution JavaScript compatible avec ce navigateur ?

Answer 1

J'utilise habituellement accounting.js Vous pouvez le télécharger à partir de http://openexchangerates.github.io/accounting.js/#download

Il est assez facile à utiliser. Vous pouvez voir comment il fonctionne à partir de cette même page de téléchargement.

J'ai créé quelques fonctions javascript que j'utilise pour gérer le curseur :

        function formatMoney(myField){
            if(myField.selectionStart || myField.selectionStart == '0'){
                var len = myField.value.length;
                var caretPos = doGetCaretPosition(myField);
                myField.value = accounting.formatMoney(myField.value);
                var newlen = myField.value.length;
                setCaretPosition(myField, newlen != len ? (newlen > len ? caretPos + 1 : caretPos - 1) : caretPos);
            }
        }
        function doGetCaretPosition (ctrl) {

            var CaretPos = 0;
            // IE Support
            if (document.selection) {

                ctrl.focus ();
                var Sel = document.selection.createRange ();

                Sel.moveStart ('character', -ctrl.value.length);

                CaretPos = Sel.text.length;
            }
            // Firefox support
            else if (ctrl.selectionStart || ctrl.selectionStart == '0')
                CaretPos = ctrl.selectionStart;

            return (CaretPos);

        }
        function setCaretPosition(elem, caretPos) {
            elem.value = elem.value;
            if(elem != null) {
                if(elem.createTextRange) {
                    var range = elem.createTextRange();
                    range.move('character', caretPos);
                    range.select();
                }
                else {
                    if(elem.selectionStart) {
                        elem.focus();
                        elem.setSelectionRange(caretPos, caretPos);
                    }
                    else
                        elem.focus();
                }
            }
        }

Vous pouvez utiliser les fonctions du champ de texte comme suit :

<input id="myField" type="text" onkeyup="formatMoney(this);" onChange="formatMoney(this);" onBlur="formatMoney(this);" />

Les fonctions d'obtention et de réglage de la position du curseur ont été obtenues à partir d'ici : Définir la position du curseur du clavier dans la boîte de texte html

Je l'ai testé sur l'émulateur Android 2.1. Bien que l'émulateur soit lent, il semble fonctionner. Vous pouvez trouver la capture d'écran ici : https://www.dropbox.com/s/9ximuwh64kadiea/shot.JPG?dl=0

Answer 2

Je ne sais pas ce qu'il en est de l'autoNumeric, mais http://code.google.com/p/jquery-formatcurrency/ a l'air plutôt bien. L'exemple jsFiddle que vous avez posté ne place pas la caret correctement sur mon navigateur de bureau, mais celui-ci le fait, ainsi que sur mon téléphone Android (Jellybean). (Sur Gingerbread, la barre de curseur clignotante peut sauter à la fin de la ligne, mais vous serez toujours en train d'éditer à l'endroit où elle se trouvait en dernier). Essayez leur démo : http://www.bendewey.com/code/formatcurrency/demo/format_as_you_type.html

Answer 3

Voici une bibliothèque open source, bien contribuée, bien engagée : https://github.com/plentz/jquery-maskmoney

Cela semble répondre à votre besoin, n'est-ce pas ? Je ne l'ai pas testé sous Android.

Answer 4

Il semble que ce plugin jQuery - NumBox - vise à apporter une solution à votre problème.