在HTML中使用数字上下调节器？

Question

HTML中有数字增减控件吗？

- Hunter Mitchell

---

有许多jQuery插件可供使用。搜索花费了2秒钟找到一个：http://www.misfitgeek.com/2011/06/numeric-up-down-input-jquery/ - Brad

问题未明确。您所说的“数字上下”是指什么？您是在寻找字符实体还是小部件？ - outis

我不需要asp，我需要一个基于html或jquery的解决方案...我正在寻找像1、2、3、4、5、6这样的东西...等等。 - Hunter Mitchell

请查看Kendo UI的数字文本框：http://demos.kendoui.com/web/numerictextbox/index.html - kinakuta

Answer 1

使用HTML5 <input type="number"/>。

更多阅读请参考《深入浅出HTML5》，浏览器兼容性表格请查看“什么时候可以使用数字输入类型？”

- Matt Ball

---

这在Chrome中看起来很棒，但在Internet Explorer中上下按钮没有显示出来。-.- - MilMike

嗨，@Matt，Internet Explorer不支持输入控件的上下键。除了按键事件之外，还有其他方法吗？ - Khawaja Asim

Answer 2

使用带有 type="number" 的 input 标签。

<input type="number">

以下是如何使用NumericUpDown的示例：

document.getElementById("square").addEventListener("click", function() {
  var result = document.getElementById("result");
  var nudMax = document.getElementById("max").value;

  result.innerHTML = nudMax * nudMax;
});

<label for="max">Max</label>
<input id="max" type="number">

<button id="square">Square</button>

<br>

<label for="result">Result:</label>
<output id="result"></output>

- Black

Answer 3

有很多数字步进器可供选择。搜索“数字步进器”或“数字微调器”。

http://xflatlinex.github.io/Numeric-Stepper/

- MMeah

---

该链接还提供了一个 type=numeric 的 html5 数据属性的实现，如果您的浏览器兼容的话。 - MMeah

链接已失效。谷歌搜索提供了这个匹配项：https://bitbucket.org/___flatline___/numeric-stepper - My Head Hurts

嘿，我刚在我的服务器日志中发现了这个哈哈。谢谢分享！我修复了链接，它实际上指向http://xflatlinex.github.com/Numeric-Stepper，该项目现在托管在github上。 - Flatline