JavaScript caret position

Question

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?

Answer 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

Answer 2

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

Answer 3

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.

Answer 4

看来这个jQuery插件 - NumBox - 旨在为您的问题提供解决方案。