键入 HTML/Javascript 时将输入格式设置为 2 位小数答案

【问题标题】：Format Input to 2 Decimals while Typing HTML/Javascript键入 HTML/Javascript 时将输入格式设置为 2 位小数
【发布时间】：2016-08-08 15:19:37
【问题描述】：

如何创建货币输入字段？我正在寻找它的工作方式如下：

首字母： 0.00
输入“1”：0.01
输入“2”：0.12
输入“5”：1.25

我对网页设计很陌生，所以我正在寻找一个更简单的解决方案。我在 Angular 解决方案中看到了类似的问题和答案，但我不确定如何在我的 HTML 项目中实现它。我有一个包含 HTML 文件的简单文件夹。谢谢！

【问题讨论】：

你必须先尝试一下。
我已经尝试了角度解决方案，但我不确定如何实现它。我在 iOS Project 文本字段中实现了类似的功能，但是我不确定逻辑是否相同
刚刚回答相同：stackoverflow.com/questions/38972448/…

标签： javascript html

【解决方案1】：

有点麻烦

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

【讨论】：

【解决方案2】：

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

【讨论】：