HTML5 <input type="number" ... 能够显示数字以及字母作为选项答案

【问题标题】：HTML5 <input type="number" ... being able to show number as well as well as alphabets as choicesHTML5 <input type="number" ... 能够显示数字以及字母作为选项
【发布时间】：2023-03-04 01:15:01
【问题描述】：

我有以下 HTML5 标记，它工作正常，但我希望它具有额外的功能。

<input class="form-field-short" type="number" min="1" max="5" value="0" name="someName" />

我得到一个在 1 和 12 之间选择的输入字段。

现在我希望它允许字符串以及当前的选择。

For example.. 1, 2, 3, 4, 5, ABC, DEF, GHI, XYZ

在其他地方，在我的代码中，我也使用了<select><option></option></select>，但这不是我想要的。
我正在寻找<input type="number" ....> 标签，它能够在选项中显示数字和单词。

【问题讨论】：

标签： html input numbers words

【解决方案1】：

一个选项是数字文本输入，它还列出了一些非数字选项（通常显示在浏览器的下拉菜单中）：

<input type="text" list="list" inputmode="numeric"/>
<datalist id="list">
    <option value="ABC"/>
    <option value="DEF"/>
    <option value="GHI"/>
</datalist>

但是，如果包括数字在内的整个选项集是有限的，那么<select> 可能更合适，并且得到更广泛的支持：

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="ABC">ABC</option>
    <option value="DEF">DEF</option>
    <option value="GHI">GHI</option>
</select>

见this fiddle。

【讨论】：

您的回答是一个不错的选择，我暂时实施了<select><option></option></select>。但这仍然不能回答我的问题。
在触摸屏平台上单击数字字段时看到的按钮是由浏览器生成的，而不是由页面生成的。因此，如果你想改变它们的行为方式，唯一的选择就是在 html 中实现你自己的一组按钮。
我现在明白了。我会按照你的建议去做。谢谢:)

【解决方案2】：

如果您希望为访问者提供选择，您可能应该使用这样的下拉菜单：

   <select>
      <option value="1">1</option>
      <option value="AABB">AABB</option>
      <option value="9">9</option>
      <option value="XRZ">XRZ</option>
   </select>

【讨论】：