首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

HTML 结构

首先,您需要在 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>
        // JavaScript 代码将在这里添加
    </script>
</body>
</html>

JavaScript 逻辑

接下来,您需要添加 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 代码结合在一起,您将得到一个完整的示例:

代码语言: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>

说明

  • HTML 结构:使用 Bootstrap 的输入组(input group)来创建一个包含 +- 按钮的输入框。
  • JavaScript 逻辑:为 +- 按钮添加事件监听器,以便在点击时更新输入框的值。
  • 输入限制:在减少值时,确保输入值不小于 0。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券