基于JavaScript实现文本框求和并将小数点替换为逗号

需求描述 #

我在网上找到一段实现文本框求和的代码，基本符合需求，但需要把小数的小数点替换成逗号，同时禁止在文本框中输入点号。由于我的JavaScript知识比较薄弱，不知道怎么修改，恳请大家帮忙。

原始代码 #

<html>
    <head>
        <title>Sum Html Textbox Values using jQuery/JavaScript</title>
        <style>
            body {
                font-family: sans-serif;
            }
            #summation {
                font-size: 18px;
                font-weight: bold;
                color:#174C68;
            }
            .txt {
                background-color: #FEFFB0;
                font-weight: bold;
                text-align: right;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </head>
    <body>
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
    <tr>
        <td width="40px">1</td>
        <td>Butter</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Cheese</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Eggs</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr>
        <td>4</td>
        <td>Milk</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr>
        <td>5</td>
        <td>Bread</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr>
        <td>6</td>
        <td>Soap</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr id="summation">
        <td>&nbsp;</td>
        <td align="right">Sum :</td>
        <td align="center"><span id="sum">0</span></td>
    </tr>
</table>
<script>
    $(document).ready(function(){

        //iterate through each textboxes and add keyup
        //handler to trigger sum event
        $(".txt").each(function() {

            $(this).keyup(function(){
                calculateSum();
            });
        });

    });

    function calculateSum() {

        var sum = 0;
        //iterate through each textboxes and add the values
        $(".txt").each(function() {

            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }

        });
        //.toFixed() method will roundoff the final sum to 2 decimal places
        $("#sum").html(sum.toFixed(2));
    }
</script>
</html>

修改后的代码 #

<html>
    <head>
        <title>Sum Html Textbox Values using jQuery/JavaScript</title>
        <style>
            body {
                font-family: sans-serif;
            }
            #summation {
                font-size: 18px;
                font-weight: bold;
                color:#174C68;
            }
            .txt {
                background-color: #FEFFB0;
                font-weight: bold;
                text-align: right;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </head>
    <body>
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
    <tr>
        <td width="40px">1</td>
        <td>Butter</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Cheese</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Eggs</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr>
        <td>4</td>
        <td>Milk</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr>
        <td>5</td>
        <td>Bread</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr>
        <td>6</td>
        <td>Soap</td>
        <td><input class="txt" type="text" name="txt"/></td>
    </tr>
    <tr id="summation">
        <td>&nbsp;</td>
        <td align="right">Sum :</td>
        <td align="center"><span id="sum">0</span></td>
    </tr>
</table>
<script>
    $(document).ready(function(){

        $(".txt").each(function() {
            // 按键抬起时计算总和
            $(this).keyup(function(){
                calculateSum();
            // 禁止输入点号（主键盘.和小键盘.）
            }).keydown(function(e) {
                if (e.keyCode === 190 || e.keyCode === 110) {
                    e.preventDefault();
                }
            // 处理粘贴或输入的点号，自动替换为逗号
            }).on('input', function() {
                this.value = this.value.replace(/\./g, ',');
            });
        });

    });

    function calculateSum() {
        var sum = 0;
        $(".txt").each(function() {
            // 将输入的逗号替换为小数点，确保JS能正确解析数字
            var inputVal = this.value.replace(/,/g, '.');
            if(!isNaN(inputVal) && inputVal.length !== 0) {
                sum += parseFloat(inputVal);
            }
        });
        // 将计算结果的小数点替换为逗号，保留两位小数
        $("#sum").html(sum.toFixed(2).replace(/\./g, ','));
    }
</script>
</html>

修改说明 #

• 禁止输入点号：通过keydown事件拦截点号按键（主键盘.keyCode=190，小键盘.keyCode=110），同时监听input事件，把用户粘贴或意外输入的点号自动替换为逗号。
• 计算时格式转换：JavaScript的parseFloat只识别小数点，所以计算前需要把文本框中的逗号替换为小数点，确保数字能被正确解析。
• 结果显示转换：计算完成后，把结果的小数点替换回逗号，符合需求的显示格式。

内容的提问来源于stack exchange，提问作者Mac Tonight