如何禁用表单文本框用户输入并由JavaScript自动填充内容

需求：制作和Qty样式一致的表单文本框，禁止用户手动输入，仅通过JavaScript自动计算并填充小计、税费（5%）、总计等内容。此前尝试用innerHTML实现时，丢失了文本框原有样式，无法达到预期效果。

原代码如下：

<fieldset>
    <legend><span>Price: $59.99</span></legend>

    <fieldset>
        <legend><span>Qty:</span></legend>
        <input type="number" id="bookQty" min="0" />
        <label for="bookQty"></label>
    </fieldset>
    <fieldset>
        <legend><span id="subTotal">Subtotal: </span></legend>
        <input type="number" id="subTotal" min="0" />
        <label for="subTotal"></label>
    </fieldset>
    <fieldset>
        <legend><span id="tax">Tax(5%):</span></legend>
    </fieldset>
    <fieldset>
        <legend><span id="total">Total: </span></legend>
    </fieldset>
</form>

问题分析 #

1. 原HTML存在ID重复问题（subTotal同时用于span和input），会导致DOM选择错误。
2. 税费、总计的fieldset缺少与Qty一致的输入框结构，无法继承样式。
3. 使用innerHTML替换内容会破坏原有input元素，导致样式丢失，正确做法是修改input的value属性。

解决方案 #

1. 修正HTML结构

• 为重复ID重命名，避免冲突。
• 给税费、总计添加与Qty结构一致的input，并设置readonly属性（禁止输入但保留表单提交能力，若无需提交可改用disabled），确保样式统一。

2. JavaScript计算逻辑

监听Qty输入框的input事件，实时计算并更新对应输入框的value，而非替换元素。

3. 样式统一（可选）

若readonly状态下输入框样式有变化，可通过CSS重置，保持与可输入状态一致。

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 保持所有输入框样式一致，包括readonly状态 */
        input[type="number"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 80px;
            /* 移除readonly默认样式变化 */
            background-color: #fff;
            color: #333;
        }
        fieldset {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ddd;
        }
        legend span {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <form>
        <fieldset>
            <legend><span>Price: $59.99</span></legend>

            <fieldset>
                <legend><span>Qty:</span></legend>
                <input type="number" id="bookQty" min="0" value="0" />
                <label for="bookQty"></label>
            </fieldset>
            <fieldset>
                <legend><span>Subtotal: </span></legend>
                <input type="number" id="subTotal" min="0" readonly />
                <label for="subTotal"></label>
            </fieldset>
            <fieldset>
                <legend><span>Tax(5%):</span></legend>
                <input type="number" id="tax" min="0" readonly />
                <label for="tax"></label>
            </fieldset>
            <fieldset>
                <legend><span>Total: </span></legend>
                <input type="number" id="total" min="0" readonly />
                <label for="total"></label>
            </fieldset>
        </fieldset>
    </form>

    <script>
        const bookQty = document.getElementById('bookQty');
        const subTotal = document.getElementById('subTotal');
        const tax = document.getElementById('tax');
        const total = document.getElementById('total');
        const unitPrice = 59.99;
        const taxRate = 0.05;

        // 计算并更新数值
        function calculateTotals() {
            const qty = parseInt(bookQty.value) || 0;
            const subtotal = qty * unitPrice;
            const taxAmount = subtotal * taxRate;
            const grandTotal = subtotal + taxAmount;

            // 设置输入框value，保留样式
            subTotal.value = subtotal.toFixed(2);
            tax.value = taxAmount.toFixed(2);
            total.value = grandTotal.toFixed(2);
        }

        // 监听数量变化事件
        bookQty.addEventListener('input', calculateTotals);
        // 初始化计算
        calculateTotals();
    </script>
</body>
</html>

关键说明 #

• 使用readonly属性禁止用户输入，同时保留输入框的原有样式结构。
• 通过修改input的value属性更新内容，避免innerHTML替换元素导致的样式丢失。
• 实时监听数量输入变化，确保计算结果同步更新。

内容的提问来源于stack exchange，提问作者Skye Smith