如何配置bootstrap输入微调器，以改变输入值时，按下+或-按钮？

在 Bootstrap 中，输入微调器（Input Spinner）是一个用于增加或减少数值的控件。要配置输入微调器以在按下 + 或 - 按钮时改变输入值，您可以使用 Bootstrap 的 JavaScript 组件或自定义 JavaScript 代码来实现。

以下是一个简单的示例，展示如何使用 Bootstrap 5 的输入微调器，并在按下 + 或 - 按钮时改变输入值。

HTML 结构

首先，您需要在 HTML 中创建一个输入微调器的结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrap Input Spinner</title>
</head>
<body>
    <div class="container mt-5">
        <h2>Input Spinner Example</h2>
        <div class="input-group">
            <button class="btn btn-outline-secondary" type="button" id="decrease">-</button>
            <input type="number" class="form-control" id="spinner" value="0" min="0">
            <button class="btn btn-outline-secondary" type="button" id="increase">+</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // JavaScript 代码将在这里添加
    </script>
</body>
</html>

JavaScript 逻辑

接下来，您需要添加 JavaScript 代码，以便在按下 + 或 - 按钮时更新输入值：

document.getElementById('increase').addEventListener('click', function() {
    const input = document.getElementById('spinner');
    input.value = parseInt(input.value) + 1; // 增加 1
});

document.getElementById('decrease').addEventListener('click', function() {
    const input = document.getElementById('spinner');
    const currentValue = parseInt(input.value);
    if (currentValue > 0) {
        input.value = currentValue - 1; // 减少 1
    }
});

完整代码示例

将上述 HTML 和 JavaScript 代码结合在一起，您将得到一个完整的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrap Input Spinner</title>
</head>
<body>
    <div class="container mt-5">
        <h2>Input Spinner Example</h2>
        <div class="input-group">
            <button class="btn btn-outline-secondary" type="button" id="decrease">-</button>
            <input type="number" class="form-control" id="spinner" value="0" min="0">
            <button class="btn btn-outline-secondary" type="button" id="increase">+</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('increase').addEventListener('click', function() {
            const input = document.getElementById('spinner');
            input.value = parseInt(input.value) + 1; // 增加 1
        });

        document.getElementById('decrease').addEventListener('click', function() {
            const input = document.getElementById('spinner');
            const currentValue = parseInt(input.value);
            if (currentValue > 0) {
                input.value = currentValue - 1; // 减少 1
            }
        });
    </script>
</body>
</html>