Convert number to floating point on key press or key up or key down

Question

I am developing a web site in which i want the number to be formatted in the given requirement that is as below:

• If I press "1" it should say "1".
• If I press "12" it should say "12".
• If I press "123" it should say "1.23".
• If I press "1234" it should say "12.34".
• This sequence should also work when I press backspace.

I have developed it on my own that is as below:

        function Maskme(obj, evt) {

        var event = (window.event) ? window.event : evt;

        var str = document.getElementById("txtamt");
        if (event.keyCode != 8 && event.keyCode != 13) {

            if (str.value.length == 3 && str.value.indexOf(".") == -1) {
                var val = parseFloat(str.value);
                var val1 = (val / 100).toFixed(2);
                str.value = val1;
            }
            else if (str.value.length > 3) {
                var val = parseFloat(str.value) * 1000;
                var val1 = (val / 100).toFixed(2);
                str.value = val1;
            }
            else {
                str.value = str.value;
            }
        }
        else {
            if (event.keyCode != 13) {
                var str1 = parseFloat(str.value) / 10;
                if (str1 != 0 && !isNaN(str1))
                    str.value = (str1).toFixed(2);
                else
                    str.value = "";
            }
        }
    }

But I am having problem that is:

1. If I rapidly press "123" it says "12.30" or "12.3" instead of "1.23"
2. Backspace is also not working after I reach back to 1.23
3. maximum 7 digits are allowed to enter in the text field

If there any ready made plugin available or anyone has already developed this kind of plugin then please inform me I will appreciate it a lot.

Answer 1

I changed it to replace the dot first and then the calculate is pretty easy:

$("#txtamt").keyup(function(obj, evt) {
    var event = (window.event) ? window.event : evt;

    //ignore arrow keys so that user can move curser 
    switch(event.keyCode)
    {
        case 37:
        case 38:
        case 39:
        case 40:
            return;
        default:
            break;
    }                

    var str = document.getElementById("txtamt");
    str.value = str.value.replace(".", "");

    if (str.value.length == 3) {
        var val = parseFloat(str.value);
        var val1 = (val / 10).toFixed(1);
        str.value = val1;
    }
    else if (str.value.length > 3) {
        var val = parseFloat(str.value);
        var val1 = (val / 100).toFixed(2);
        str.value = val1;
    }        
});

​

DEMO: http://jsfiddle.net/ceJcn/7/​

Answer 2

Here is my version. DEMO

It could possibly be more elegant, but it seems to do what it is supposed to do

var x = document.getElementById("x");
x.focus();
x.select();
var tId;
x.onfocus=function() {
    var fld = this;
    tId = setInterval(function() {
        var val = fld.value;
        if (val.length>2) {
          if (val.indexOf(".") ==-1) {
            if (val.length==3) val = parseFloat(val/10).toFixed(1);
            else val = parseFloat(val/100).toFixed(2);
          }
          else if (val.length==4) val = parseFloat(val).toFixed(1);
          else if (val.length<=3) val = parseInt(val);
          else val = parseFloat(val).toFixed(2);
          fld.value=val;
        }
    },10);
}
x.onblur=function() { clearInterval(tId)}