CODEWITHSUNDEEP
javascripthtml
Josh D.
Josh D.

Reputation: 161

Format Input to 2 Decimals while Typing HTML/Javascript

How can I create an input field for currency? I'm looking for it to work as follows:

Initial:      0.00
Type "1": 0.01
Type "2": 0.12
Type "5": 1.25

I'm pretty new with web design, so I'm looking for a simpler solution. I saw a similar question & answer to this question with an Angular solution, but I'm unsure how to implement that into my HTML project. I have a simple folder with HTML files in it. Thanks!

Upvotes: 0

Views: 1259

Answers (2)

Sami
Sami

Reputation: 8419

A little tricky

Working Demo

document.getElementById("demo").onkeydown = function (e) {
        //console.log(e.keyCode);
        if (e.keyCode != 37 && e.keyCode != 39 && e.keyCode != 8 && e.keyCode != 46)
            e.preventDefault();

        if (e.keyCode == 8 || e.keyCode == 46) {
            //If already key down (backspaceOrDel=1) then no affect
            if (backspaceOrDel == 1)
                e.preventDefault();
            else
                backspaceOrDel = 1;
            return;
        }

        if (e.keyCode < 48 || (e.keyCode > 57 && e.keyCode <96) || e.keyCode > 105 )
            return;
        try {                
            var val = this.value;
            var val1 = 0;
            if (val == 0) {
                val1 = e.key / 100;
            }
            else {
                //very tricky. We needed val1=val*10+e.key but it does not 
                //work correctly with floats in javascript.
                //Here you have to different than android in logic
                var val1 = parseFloat(val) * 1000;
                val1 += parseFloat(e.key);
                val1 = val1 / 100;
            }
            val1 = val1.toFixed(2);
            if (!isNaN(val1))
                this.value = val1;
        }
        catch (ex) {
            alert("Invalid Amount");
        }
    };

Upvotes: 2

Tsai
Tsai

Reputation: 1

<style>
     .amount_tendered {
          text-align: right;
          font-size: 24px;
          width: 200px;

    }
</style>

<form>
    <input class="amount_tendered" id="text" type="number" min="0" value="0.00" onkeyup="formatNum(this);" onclick="this.select(); activated();">
</form>

<script type="text/javascript">
    String.prototype.splice = function(idx, rem, str) {
        return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));
    };

    function formatNum(obj){
        var str = obj.value;

        switch (true){
            case str.length==1:
                str = '0.0' + str;
                break;
            case str.length==3:
                str = '0' + str;
        }

        var indices = [];
        for(var i=0; i<str.length;i++) {
            if (str[i] === "." && (str.length - i)!=3) indices.push(i);
        }

        for(var i=0; i<indices.length;i++) {
            str = str.replace('.','');
        }

        indices = [];

        for(var i=0; i<str.length;i++) {
            if (str[i] === ".") indices.push(i);
        }

        if (indices.length==0){
            str = str.splice(str.length-2, 0, ".");
        }

        if (str[0]=='0' && str[1]!='.'){
            str = str.replace('0','');
        }

        obj.value = str;
    }
</script>

Upvotes: 0

Related Questions