如何配置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>说明
- HTML 结构：使用 Bootstrap 的输入组（input group）来创建一个包含
+和-按钮的输入框。 - JavaScript 逻辑：为
+和-按钮添加事件监听器，以便在点击时更新输入框的值。 - 输入限制：在减少值时，确保输入值不小于 0。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
