41

I'm developing a mobile banking application and I'm interested in formatting the currency amount inputs in real time.

I've already tested autoNumeric plugin and jQuery Format Currency Plugin but both have cursor position issues on Android 2.* browsers.

Does anyone have a JavaScript solution compatible with this browsers?

Diogo Cardoso
  • 21,637
  • 26
  • 100
  • 138
  • 1
    After struggling with numeric masks, I had to disable them (and others) for mobile browsers. As far as I know there are no workarounds. – Marcelo De Zen Aug 10 '12 at 20:57
  • Does this version of the Android browser not support `obj.selectionStart` and `obj.selectionEnd` properly? – scunliffe Aug 16 '12 at 17:30
  • 1
    If you're already using jQuery, have you tried jQuery++ (I recently used it for correct caret position placement after capturing tab and enter key presses)? Works great when I tested it. Regardless, you could always use their Range and Selection methods (without need of jQuery). jquerypp.com – Joe Johnson Aug 22 '12 at 05:45
  • @scunliffe Android 2.3.6 supports both properties. – Diogo Cardoso Mar 24 '15 at 10:20
  • @JoeJohnson could you please provide an example? – Diogo Cardoso Mar 24 '15 at 10:21
  • 1
    @DiogoCardoso does the input field actually have the `type="number"` attribute? There's been a bunch of browser changes recently that have caused issues. 1.) Chrome has "removed" the `selection*` properties/methods from number fields (so attempts to manipulate with JavaScript are very limited and 2.) Firefox has recently tied validation to the number field so setting say `"4."` as a partial value will fail, and actually blank out the field, and 3.) Firefox's recent validation now makes `` restrict to **integers** only - you have to add `step="any"` to enter decimal values – scunliffe Mar 24 '15 at 13:07
  • @scunliffe I've tested with `type="number"` and `type="text"`, none of them works properly. – Diogo Cardoso Mar 25 '15 at 08:45
  • 1
    @DiogoCardoso yeah I'm very quickly learning that attempting to tinker with type="number" fields isn't going to be worth it. Which is a bit sad since it has the content filtering I want and the soft-keyboard selection on mobile devices... but I need to revert to text fields on "desktop" browsers if I want to enhance the field in any way :-( – scunliffe Mar 25 '15 at 08:51
  • Have you tried any input mask plugins like [jquery.inputmask](http://robinherbots.github.io/jquery.inputmask/)? – Mottie Mar 26 '15 at 18:06

4 Answers4

1

I don't know about autoNumeric, but http://code.google.com/p/jquery-formatcurrency/ looks pretty good. The jsFiddle example you posted doesn't place the caret correctly on my desktop browser, but this does, and on my (Jellybean) Android phone as well. (On Gingerbread, the blinking cursor bar may jump to the end of the line, but you will still be editing where it last was.) Try their demo: http://www.bendewey.com/code/formatcurrency/demo/format_as_you_type.html

Sparky
  • 8,437
  • 1
  • 29
  • 41
1

I usually use accounting.js You can download it from http://openexchangerates.github.io/accounting.js/#download

It's quite easy to use. You can see how it works from that same download page.

I created a couple javascript functions which i use to do the cursor management:

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

You can use the functions with the text field as:

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

The getting and the setting caret position functions were gotten from here: Set keyboard caret position in html textbox

I tested it on Android 2.1 emulator. Though the emulator was slow but it seemed to be working. You can find the screenshot here: https://www.dropbox.com/s/9ximuwh64kadiea/shot.JPG?dl=0

Community
  • 1
  • 1
Richboy
  • 21
  • 1
  • 3
0

Here's an open source, well contributed, well commited library : https://github.com/plentz/jquery-maskmoney

Seems to answers your need, doesn't it ? Havent't tested it under Android though.

Cyril CHAPON
  • 3,556
  • 4
  • 22
  • 40
-1

It seems this jQuery plugin - NumBox - aims to provide solution to your problem.

naXa stands with Ukraine
  • 35,493
  • 19
  • 190
  • 259