HTML5 <input type="number"> CSS 自定义答案

【问题标题】：HTML5 <input type="number"> CSS customizationHTML5 <input type="number"> CSS 自定义
【发布时间】：2014-03-16 16:47:59
【问题描述】：

我有一个 HTML5 数字输入类型

<input type="number">

我的要求是用户只能通过向上和向下箭头（微调器）设置值。用户不应手动输入该值。是否可以仅使用 CSS？

我正在使用 node-webkit。

类似于这种方法：

【问题讨论】：

标签： html css

【解决方案1】：

我认为只使用 CSS 是不可能的。如果您愿意，这是一个小脚本：

<input type="number" onkeydown="if (event.keyCode != 38 && event.keyCode != 40) {event.preventDefault()}"/>

【讨论】：

我也会排除 Enter 或 Backspace 键。
@trungDQ 也会在安卓上吗？
@ShouryaSharma 您应该考虑排除 Enter (keyCode = 13) 和 Backspace (keyCode = 8) 键，正如 @Hashem 建议的那样，只会让用户能够使用 @987654326 提交表单@ 键和Backspace 到...，你明白了。只需将它们添加到条件中即可。
@ShouryaSharma，我不确定这是否适用于 android。万一不行，就做一些测试，找到Up和Down键的keyCode，然后放到条件语句中。
键是否不起作用并不重要，因为我需要微调器在 node-webkits 的 kiosk 模式下工作（没有键盘）。

【解决方案2】：

使用 JavaScript

document.getElementById("myId").addEventListener("keydown", function(e){

    e.preventDefault();

})

【讨论】：