合并HTML编号并选择输入

Question

这是我尝试过的：

<input type="number select" value="12" step="12"></input>

我正在努力实现：

• 带有向上/向下箭头的输入，可在12的值之间移动
• 在台式机上下拉菜单，然后在移动设备上选择一个“旋转器” （移动设备 Safari的下拉菜单也为12（例如12、24、36、48， 等）
• 可以输入的输入（现在输入任何值都可以， 如果该值不是12，则没有错误通知）
• 所有这些都应该是可以用CSS设置样式的HTML输入

Answer 1

要回答第一个要点，可以在数字输入上使用min，max和step，以使向上/向下箭头在12的倍数之间移动这个：

<input type="number" min="12" max="5000" step="12">

要结合使用下拉菜单/微调框和数字输入，请查看以下问题：Drop Down Menu/Text Field in one

尽管需要一些编码，但可接受的答案应该可以让您执行所需的操作。另一个更深层次的答案建议使用<datalist>，它的工作原理和简单得多，但在您将值输入到输入中后，其行为却很奇怪-下拉选项消失了，您仅将当前值视为一个选项。如果您可以接受这种行为，并且只需要一个简单的解决方案，我建议您使用以下类似的方法，但是如果您想使用一些更好的方法，请绝对使用上面链接的问题。

<input type="number" list="quantities" min="12" step="12">
<datalist id="quantities">
  <option value="12">
  <option value="24">
</datalist>

我没有提供最多5000个选项，但您明白了。我敢肯定，有一种方法也可以通过编程方式来填充选项，而无需手动键入它们-我将从搜索“使用数组作为数据列表选项”开始，或者如果您对此感兴趣的话，我自己从来没有做过。我想有一种方法可以在JavaScript中创建选项数组并将其传递。