结合HTML编号和选择输入 [英] Combining HTML Number & Select Inputs

问题描述

这是我尝试过的:

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

我正在努力实现:

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

• an input with up/down arrow that moves between values of 12
• a dropdown on desktop and a select "spinner" on mobile (mobile safari) with the dropdown values also of 12 (eg., 12, 24, 36, 48, ect.)
• an input that can be typed into (typing in any value is fine for now, no error notification neccessary if the value is not a value of 12)
• all of this should be one HTML input that can be styled with CSS

推荐答案

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

To answer your first bullet point, you can use min, max, and step on the number input to get the up/down arrows to move between multiples of 12, like this:

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

要结合使用下拉菜单/微调框和数字输入，请查看以下问题:

To combine a dropdown/spinner and a number input, take a look at this question: Drop Down Menu/Text Field in one

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

The accepted answer should let you do what you need to do, although it takes a bit of coding. Another answer farther down suggests using <datalist>, which sort of works and is much simpler but behaves oddly after you enter a value into the input - the dropdown options disappear and you only see the current value as an option. If you're ok with that behavior and just want a simple solution, I recommend using something like below, but if you want something that works a little better, definitely take a look at the question linked above instead.

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

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

I didn't include all the options up to 5000, but you get the idea. I'm sure there's a way to fill in the options programmatically without typing them by hand, too - I would start by searching for "using an array as datalist options" or something if you're interested in doing that, although I've never done it myself. I imagine there's a way to create an array of options in JavaScript and pass it in.

这篇关于结合HTML编号和选择输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！