输入固定值答案

【问题标题】：Input with a fixed value输入固定值
【发布时间】：2021-12-02 13:12:33
【问题描述】：

我想创建一个具有固定价格的表、一个可以输入值的输入字段和一个包含总计的列（价格*数量）

我遇到的问题是我编写的代码有效，但仅适用于整数。逗号后不读。因此，如果我输入 4.39 的价格，它会以 4 计算。

此外，如果我将类型设置为“十进制”或“数字”，则它不起作用。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.price,.quantity').on('keyup', function () {
                var row = $(this).closest('tr');
                var price = $(row).find('.price').val() == '' ? 0 : $(row).find('.price').val();
                var quantity = $(row).find('.quantity').val() == '' ? 0 : $(row).find('.quantity').val();
                $(row).find('.total').val(parseInt(isNaN(price) ? 0 : price) * parseInt(isNaN(quantity) ? 0 : quantity));
            });
        });
    </script>
</head>
<body>
    <div>
        <table>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
            <tr>
                <td>Chai</td>
                <td><input type="text" class="price" value="1.39" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" /></td>
            </tr>
            <tr>
                <td>Chang</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" /></td>
            </tr>
            <tr>
                <td>Aniseed Syrup</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" /></td>
            </tr>
        </table>
    </div>
</body>
</html>

【问题讨论】：

这能回答你的问题吗？ How do I make a text input non-editable?
您可以使用“只读”或“禁用”属性
感谢帮助现在只有代码将值视为整数并且无法在“。”之后读取的问题

标签： javascript html json

【解决方案1】：

您可以将readonly 属性添加到您的input fields 以使其成为non-editable。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.price,.quantity').on('keyup', function () {
                var row = $(this).closest('tr');
                var price = $(row).find('.price').val() == '' ? 0 : $(row).find('.price').val();
                var quantity = $(row).find('.quantity').val() == '' ? 0 : $(row).find('.quantity').val();
                $(row).find('.total').val(parseInt(isNaN(price) ? 0 : price) * parseInt(isNaN(quantity) ? 0 : quantity));
            });
        });
    </script>
</head>
<body>
    <div>
        <table>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
            <tr>
                <td>Chai</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" readonly/></td>
            </tr>
            <tr>
                <td>Chang</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" readonly/></td>
            </tr>
            <tr>
                <td>Aniseed Syrup</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" readonly/></td>
            </tr>
        </table>
    </div>
</body>
</html>

【讨论】：