Guruprasad Rao Guruprasad Rao - 5 months ago 19
Javascript Question

accounting.js keeps cursor at end for decimal values

I am using

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

I understand that the formatting function runs too soon.
I don't know this accounting.js lib... but,

Try this:

$("#Price").on("change", function(){ ... rest of the function stay the same...}

Or:

$("#Price").on("blur", function(){ ... rest of the function stay the same...}

input is not an event...
Your code sure do strange things. ;)

EDIT

My script for «fixing» cursor position when I have a function tha returns a modified value to the inpyt ``onkeyup':

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

From within a function that manipulates the value, I get the cursor position before returning the value... And then «replace» the cursor:

cursorPos=GetCursorPos(field);
field.value = n;
SetCursorPos(field,cursorPos);

Maybe it could help....
;)


It include this:

// ---------------------------------------------------------------------------  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




EDIT (based on working test in your fiddle)

$("#Price")
  // 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);
        if(this.value.length==1){offset=1;}else{offset=0;}
    cursorPos = GetCursorPos(this);
    //alert(cursorPos);
    this.value = formatted;
      SetCursorPos(this,cursorPos+offset);
    //this.setSelectionRange(cursorPosition, cursorPosition);
});

Your updated Fiddle here.

And, yes... The pound sign was creating an offset issue, but only on the first inputted character.

Comments