accounting.js keeps cursor at end for decimal values

Question

I am using accoungting.js plugin to format currency. The only problem is, it places cursor at the end of the value as soon as type anything and since I've kept 2 decimal value precision for currency it stops me from typing more. I did not find any source where this is used to edit values as soon as you type. How can I make this work? Any workaround or hack found?

<input autocomplete="off" type="text" id="Price"/>

JS

var options = {
    symbol : "£",
    decimal : ".",
    thousand: ",",
    precision : 2,
    format: "%s%v"
};

$("#Price")
  .on("input",
    function() {
      var _this = $(this);
      debugger;
      var val = _this.val().startsWith("£") ? _this.val().split("£")[1] : _this.val();
      var value=accounting.formatMoney(val,options);
      _this.val(value);
});

Demo

Answer 1

FULLY RE-EDITED
(for clarity)

This is, I think, a kind of a bug fix for accounting.js.

Problem was about cursor position when used on keyup (or on input event like here) in an input field.

In this solution, I switched back to keyup event, since - strangely- input event do not provide the keycode number.

Here is the final solution

Add this small script of mine (made partly from SO answers and some work, 1 year ago or so... Can't remember the sources)

// ---------------------------------------------------------------------------  What is the browser ?

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6

function GetCursorPos (field) {
    // Initialize
    iCaretPos = 0;

    if (isIE){  //(document.selection) {

        // Set focus on the element
        field.focus();

        // To get cursor position, get empty selection range
        oSel = field.createTextRange();

        // Move selection start to 0 position
        oSel.moveStart('character', -field.value.length);

        // The caret position is selection length
        iCaretPos = oSel.text.length;
    }
    if (isChrome||isSafari){    //(field.selectionStart || field.selectionStart == '0')
        iCaretPos = field.selectionStart;
    }
    if (isFirefox){
        iCaretPos = field.selectionStart;
    }

    return iCaretPos;
}

function SetCursorPos (field,Pos) {
    // Set focus on the element
    field.focus();

    if (isIE){
        field.selectionStart=Pos;
    }
    if (isChrome||isSafari){
        field.setSelectionRange(Pos,Pos);
    }
    if (isFirefox){
        field.selectionStart=Pos;
    }
    return;
}

Then, precisely for accounting.js, the way to manage the onkeyup value update is:

$("#Price")
.on('keyup', function (event) {
    var val = this.value;
    var x = event.keyCode;                  // Get the keycode for backspace check
    var offset=0;                           // Set the offset to zero by default.

    if(((x>=96)&&(x<=105))||((x>=37)&&(x<=40))||(x==8)||(x==46)){   // Allow digits from 0 to 9 AND arrows AND backspace AND Delete

        var dotPos = val.indexOf(".");          // Check for dot position.
        var offsetComa = val.length%4;          // Variable used to check if a coma is to be added.

        // Offset conditions
        if(val.length==1){
            offset=1;                           // When the first digit is entered in the field, it's time to offset by 1 for the "£" to be added.
        }
        if(val.length>1){
            if(offsetComa==0){                  // when there is no remainder of val.length/4, it's time to offset 1 for the coma to be added.
                offset=1;
            }
            if((offsetComa==0)&&((x==46)||(x==8))){ // when there is no remainder of val.length/4, BUT WE REMOVED A CHARACTER.  offset -1 for the coma to be added.
                offset=-1;
            }
            if(dotPos==1){                      // If dot is right after "£" => user has backspaced!
                val="";                         // Consider val as empty!
            }
            if(dotPos==-1){                     // If no dot present reinsert it!
                val = val.slice(0, cursorPos-1) + "." + val.slice(cursorPos);
            }
            if(cursorPos==val.length-2){        // If inputting the second decimal, remove the possible third to avoid rounding.
                val = val.slice(0, cursorPos+1);
            }
            if(cursorPos==val.length-3){        // If inputting decimals, clear offset.
                offset=0;
                val = val.slice(0, val.length-1)
            }
        }

    }else{                                      // Removes any non-digit character
        if(x!=8){
            cursorPos = GetCursorPos(this);
            val = val.slice(0, cursorPos-1) + val.slice(cursorPos);


            if(val.charAt(cursorPos-1)=="."){   // decimal point
                cursorPos+=1;
            }

            this.value = val;
            SetCursorPos(this,cursorPos-1);
        }
    }

    var hasCurrencySymbol = val.startsWith('£');
    var formatted = accounting.formatMoney(val.substr(hasCurrencySymbol ? 1 : 0), options);
    if(formatted=="£0.00"){
        formatted=""                        // Empty the field instead of showing the problematic "£0.00"
    }

    cursorPos = GetCursorPos(this);         // Get previous cursor position
    this.value = formatted;                        // Return the value to field
    SetCursorPos(this,cursorPos+offset);    // Correct cursor position
});

It manages a calculated cursor offset onkeyup.
It also manages the backspace/delete «reverse offset».
Decimals can be inputted.

Bonus, it removes all non-digit characters instantly.
:D

Have a look at the final Fiddle here.

Answer 2

When you change an input value programmatically, you need to restore the cursor position as well, as the browser loses that information.

The simplest way would be to just restore the position that was in use before the change.

// pseudocode
.on('input', function () {
    var cursorPosition = this.selectionEnd;

    var val = this.value;
    var hasCurrencySymbol = val.startsWith('£');
    var formatted = accounting.formatMoney(val.substr(hasCurrencySymbol ? 1 : 0), options);

    this.value = formatted;
    this.setSelectionRange(cursorPosition, cursorPosition);
});

But probably the more desired is to put the cursor after the digit that was just inserted. The following code shifts the last remembered cursor position by the length difference between new and old input text, which is not ideal solution (especially for first inserted digit), but is a good starting point for further improvements.

.on('input', function () {
    var cursorPosition = this.selectionEnd;

    var val = this.value;
    var hasCurrencySymbol = val.startsWith('£');
    var formatted = accounting.formatMoney(val.substr(hasCurrencySymbol ? 1 : 0), options);
    var lengthDiff = formatted.length - val.length;

    this.value = formatted;
    this.setSelectionRange(cursorPosition + diff, cursorPosition + diff);
});

The code uses setSelectionRange which is supported by all popular browsers (including IE9+).