如何配置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。
相关·内容
我使用如下代码所示的bootstrap输入微调器。有没有一种方法可以配置bootstrap输入微调器在只按+或-按钮时调用更改事件？
浏览 27提问于2019-08-17得票数 1
4回答
我使用的是jQuery微调器，设置了最小(0)和最大(500)值。如何防止用户在输入框中直接输入非数字值(或0-500范围外的值)？最小值和最大值在用户使用微调按钮时有效，但在输入表单中键入内容时无效。
浏览 0提问于2013-01-08得票数 3
回答已采纳
我实现了一个带有5个按钮的表单模型:提交，2个关闭按钮，还有2个用于输入数字微调的按钮，允许用户使用"+“和"-”按钮选择数量。问题是，每次单击"+“或"-”按钮时，模式都会关闭，这是按下提交或关闭按钮时模式的正常行为，但我需要模式保持可见，并允许用户在没有关闭模式的情况下选择数量。以下是
浏览 21提问于2020-07-26得票数 0
此对话框有一个简单的微调控件，它要求用户输入一个数字，当按下OK或Cancel时，该数字应该返回到主窗口(对于cancel，它只会返回-1)。it and wait for Ok or Cancel return;}
但是，如果按下按钮时微调器的值被
浏览 1提问于2010-08-19得票数 3
回答已采纳
1回答
当用户输入数据时，我尝试使用角来改变元素的css类，无论是在单击按钮之后还是在用户输入数据时实时地。="inputOne">.defaultClass {border: 1px solid #ccc;}
按下按钮后，控制器检查元素的模型是否为空，如果为空，则使函数返回为true，从而更改ng类中的
浏览 2提问于2015-11-05得票数 0
回答已采纳
我试过使用AsyncTask，它根本不工作，也尝试了按钮的OnFocusChange事件.我现在有点绝望。
希望你们能帮忙！)
浏览 0提问于2016-05-26得票数 1
我刚买了一个用过的AP，结果它被配置为LWAPP。我知道我可以很容易地纠正这个问题，但是我不能让这个单元默认它现有的配置。我试着打开它，保持按钮10秒，它仍然启动到预先存在的配置。
浏览 0提问于2012-08-28得票数 0
2回答
我有一个基本的应用程序，有文本输入，微调器输入，以及第二个微调器输入，它的数组取决于在选项菜单中更改的设置。目前，当我在我的应用程序中按下Home或Return时，我要么返回桌面，要么循环回到最近输入的旧输入。我如何防止我的应用程序打开自己的多个实例，使得在任何给定的时间只有一个实例运行，然后我如何保存输入的数
浏览 2提问于2010-02-22得票数 0
我从windows切换到ubuntu，并希望实现与windows相同的输入法。我现在使用的是英语(美国)和ibus我想通过单击左移位来改变输入布局。在google之后，我发现微调中的附加布局设置会有所帮助。但是，问题是它完全覆盖了左移位键。例如，在windows中，我可以输入大写字母和数字键中的符号。当我在Ubuntu中这样做时，在我长时间按下并按住左shift键后，它立即更改为另一个布局。因此，我不能用左移位键输入大写字母和符
浏览 0提问于2020-11-01得票数 2
我有一个选择年龄组的旋转器，一个带有单选按钮的单选按钮组，允许您选择性别(男性或女性)，我有一个EditText，我将允许数字输入和文本视图到当前空白的一侧。根据从微调器中选择的年龄组和选择的单选按钮之一-根据在setText框中输入的数字，将TextView的EditText设置为某个数字。，以及在微调器之后如何使其工作
如果所有这些都有效，我有if (EditText.getT
浏览 2提问于2010-10-26得票数 0
回答已采纳
2回答
JSpinner更新
、、、
当我在微调器中输入一些值并选择另一行时，前一行中的值不会改变。如果我按下，就可以了。如果我选择或按钮，它也会这样做。但是，如果我输入值并更改选择，则不会执行此操作。请帮帮忙。
浏览 0提问于2011-01-23得票数 1
我有多个页面，有一些输入字段。在这个页面上，我有一个前一个和下一个按钮，以及一个保存(提交)按钮。当我按下“保存”按钮时，它会将用户输入保存在数据库中。然而，当我按下下一个或上一个键时，我会收到一个警告：‘用户输入还没有保存，直到您单击保存按钮。按下OK将转到下一个页面，取消将使它停留在这个页面上。这就是我想要的，但是，每当我<
浏览 4提问于2015-04-24得票数 0
我有一个带有数字列表的微调“光圈”和一个带有两个选项的微调“模式”。当按钮被按下时，我需要使用各种输入来运行计算，包括从“光圈”中选择的当前值和从“模式”中派生的值。如何调用微调器的值，以便在计算中使用它？
另外，我如何使用微调器模式的选择来设置另一个值，然后在计算中实现它?更具体地说，如果<
浏览 2提问于2010-01-25得票数 4
是否有一种方法可以确定按下的键是否实际上会向输入添加某些内容？也就是说，改变它的价值？
例如，如果我有一个输入，我按了'a‘键，一个字母将出现在输入中，但是，如果我按下键，输入的值不会改变。另外，我尝试使用一个值更改的监听器，但只有当我更改一个键，然后单击输出时才会触发，这不是我想要的。我需要使用keydown或keyup侦听器
浏览 1提问于2020-01-14得票数 0
回答已采纳
我使用MVC4 + bootstrap验证。提交ajax表单后，它将调用js函数onSuccess，我将在该函数中检查返回的数据是否错误。因此，在这里，我希望以某种方式使用bo
浏览 1提问于2014-10-17得票数 0
1回答
绑定发生在验证之前
、、、、
我有一个绑定在文本块的Validation.HasError属性上的按钮。文本块有一个验证规则，用于检查用户输入的值。绑定的目的是在用户输入错误数据时禁用该按钮。因此，当用户键入错误的值时，绑定将检查textblock的HasError属性，该属性为FALSE，因此该按钮处于启用状态。然后执行验证规则。它会导致相反的情况，即文本块无效，并且按钮被启用。我如何指定先执行哪一个(绑定和验证)？我所说的t
浏览 0提问于2010-08-25得票数 0
我使用的是jQuery自动完成功能，我稍微调整了一下自动完成功能，使用户可以通过在文本框中直接输入数据来添加数据库中没有的内容。下面是一个这样的例子：
var categories = $("#log").text();
如果您手写文本区域，那么当按下add按钮时</e
浏览 0提问于2011-11-01得票数 0
回答已采纳
我试图让它的js.p5画布是在视频的顶部，但一直隐藏，直到播放按钮被按下，其中微调动画播放，直到页面被刷新(微调不必是一个视频的实际微调，它纯粹为了家庭作业的原因，以演示我在课堂上学到的东西。当按下按钮时，使微调器在视频区域的顶部播放就足够了)。 我的整个过程是，事件侦听器将执行“旋转器”函数中的代码，然后该函数将创建旋转<em
浏览 6提问于2021-07-01得票数 0
当我得到一个条目“用vlc打开”时，右击一个目录。现在精确地说，这个条目已经消失了。我怎么才能把它拿回来？
编辑:是的，我把它放在“打开”子菜单中。但是我怎么才能把它放在最上面的菜单上呢？
浏览 0提问于2012-08-01得票数 2
回答已采纳
2回答
STM32按钮读
、、、
MODER的输入模式和PUPDR有什么区别？我看到了一些按钮的代码部件。= (0U << 2*4);GPIOB->MODER &= ~(3U << 2*8); //PB8我应该把MODER寄存器作为第一个输入吗难道我不应该先做模特儿作为输入吗？
浏览 9提问于2022-11-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
